angular-material2 | 易学教程

“No provider for MdDialogRef!”

阅读更多关于 “No provider for MdDialogRef!”

Suppose I have this component: @Component({ selector: 'pizza-dialog', template: ` <h1 md-dialog-title>Would you like to order pizza?</h1> <md-dialog-actions> <button (click)="dialogRef.close('yes')">Yes</button> <button md-dialog-close>No</button> </md-dialog-actions> ` }) export class PizzaDialog { constructor(public dialogRef: MdDialogRef<PizzaDialog>) { } } I've already imported MdDialog into my app module: @NgModule({ imports: [ BrowserModule, MaterialModule.forRoot(), MdDialogModule.forRoot(), ], ... }) Why would I get this error? No provider for MdDialogRef! You may have tried to use

“Error: No provider for Overlay!”

阅读更多关于 “Error: No provider for Overlay!”

In my Angular 2.0.0-rc.7 + Angular Material 2.0.0-alpha.8-1 application built with Angular CLI 1.0.0-beta.11-webpack.9-1 , I get the following error after upgrading from rc.5 + alpha.7-4 (via the 1.0.0-beta.11-webpack.8 NG CLI): main.bundle.js:44545 Error: No provider for Overlay! at NoProviderError.Error (native) at NoProviderError.BaseError [as constructor] (http://localhost:4200/main.bundle.js:7032:34) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/main.bundle.js:44258:16) at new NoProviderError (http://localhost:4200/main.bundle.js:44289:16) at

Insert a link into MatSnackBar

阅读更多关于 Insert a link into MatSnackBar

问题 Is it possible to insert a link into the Angular Material 2 MatSnackBarModule ? I've tried doing it inside the text, but it displays the html as text. const text = '<a routerLink="/login">login</a>'; this.snackBar.open(text, 'OK', { duration: environment.snackBarTime, }); 回答1: You have to create your own custom snackbar component for links: custom-snackbar.component.html : <a routerLink="/login">Login</a> custom-snackbar.component.ts : import { Component } from '@angular/core'; @Component({

Mat-select panel min-width

阅读更多关于 Mat-select panel min-width

I'm trying to customize mat-select with multiple checkboxes. for some reason the panel get wrong min-width as below: and I don't know where its calculating this min-width. also I tried to add panelClass and override the min-width from this class, for example: <mat-select #multipleSelect (selectionChange)="selectItem($event.value)" panelClass="multiple-panel" multiple> &.multiple-panel { min-width: 200px !important; } but when opening the dropdown its open with the original width (like in the pic) and after few millisecond"jump" to the custom min-width defined on the panel class. I find the mat

Background color does not switch between light and dark themes in Angular material 2

阅读更多关于 Background color does not switch between light and dark themes in Angular material 2

I have an Angular 4 app using Material 2 (current version, 2.0.0-beta.11). I have followed the documentation for theming and created two themes, a light theme and a dark theme. Since I do not use a md-sidenav component, I have put the mat-app-background class on the body element, which applies the current theme's background color (a light grey for a light theme, and a dark grey for a dark theme.) The problem is that when my theme switcher is toggled (a simple button that adds or removes a class, nothing fancy, like this answer ), the background color from the mat-app-background is not updated.

Cannot disable matInput element with [formControlName]

阅读更多关于 Cannot disable matInput element with [formControlName]

问题 I'm using matInput and mat-form-field (@angular/material) in an Angular component, and I can't disable the matInput . A working example can be seen here. It seems likely that I'm missing something obvious, but for the life of me I can't figure out what. Is this a bug? If I remove [formControlName] from the CustomFormInputComponent , then I can successfully disable the matInput CustomFormInputComponent : import { Input, Component } from '@angular/core'; import { FormGroup } from '@angular

Angular 4 with material

阅读更多关于 Angular 4 with material

I am trying to implement "Angular-Material" with Angular4. I made all setup from official site of angular material [angular.material.io][1] [1]: https://material.angular.io/guide/getting-started but when trying to run project by npm start, getting following error: node_modules/@angular/material/typings/button/button.d.ts(40,22): error TS2420: Class 'MdButton' incorrectly implements interface 'CanDisable'. Property 'disabled' is private in type 'MdButton' but not in type 'CanDisable'. node_modules/@angular/material/typings/button/button.d.ts(40,39): error TS2507: Type '(new (...args: any[]) =>

How do you call closePanel in angular 4 autoComplete material

阅读更多关于 How do you call closePanel in angular 4 autoComplete material

问题 import { MdAutocomplete } from '@angular/material'; @Component({ template:' <input type="text" [mdAutocomplete]="auto"/> <md-autocomplete #auto="mdAutocomplete" #autoComplete> <md-option> Some Options </md-option> </md-autocomplete>' }) export class AutoComplete { @ViewChild('autoComplete') autoComplete: MdAutocomplete; closeAuto() { this.autoComplete.closePanel(); } } It is not the complete code but the idea is to call closePanel inside a method. closePanel is listed as a method on https:/

Material Angular Accordion header/title height

阅读更多关于 Material Angular Accordion header/title height

问题 So I've been trying to adopt Materials Accordion in my Web Application development. However having some troubles getting the header to expand in size as the content grows. My header is expected to have quite a few number of lines to give a summary and not just a 1 liner. If I hard-code the material header height it causes the animation to go hay-wire. Below is a sample code <mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width"> <mat-expansion-panel

How to set the color of an icon in Angular Material?

阅读更多关于 How to set the color of an icon in Angular Material?

问题 I have this, which I would assume to work, but doesn't: <mat-icon color="white">home</mat-icon> Then, I also have: <button mat-raised-button color="accent" type="submit" [disabled]="!recipientForm.form.valid"> <mat-icon color="white">save</mat-icon>SAVE </button> This code snippet, for some reason, does work (shows the icon as white). How do I get the lone mat-icon to show up as white using the color attribute? (I can easily just add a white class, but I want to understand this) 回答1: That's