angular-material

问题 I'm trying to set up angular material in my Angular (4) app with webpack, and I see in the documentation that I need to include a default theme for it to work. One of the suggested ways to do that is with @import '~@angular/material/prebuilt-themes/indigo-pink.css'; in your styles.scss if you are using angular-cli. Now, I'm not using angular-cli, but I have a main styles.scss, so I included this and my app builds fine, but then when I load it I get an error GET http://localhost:8080/@angular

问题 I'm trying to set up angular material in my Angular (4) app with webpack, and I see in the documentation that I need to include a default theme for it to work. One of the suggested ways to do that is with @import '~@angular/material/prebuilt-themes/indigo-pink.css'; in your styles.scss if you are using angular-cli. Now, I'm not using angular-cli, but I have a main styles.scss, so I included this and my app builds fine, but then when I load it I get an error GET http://localhost:8080/@angular

问题 How can I add dynamically empty mat-option to all not required mat-select in my app. like : <mat-form-field appearance="outline"> <mat-label>HMO</mat-label> <mat-select> <--how can I add this dynamically--> <mat-option>--</mat-option> <mat-option *ngFor="let hmo of HMOList" [value]="hmo.Code"> {{ hmo.Desc }} </mat-option> </mat-select> </mat-form-field> any idea? 回答1: I used the response from Prince, but my model didn't update. And I added the following in OptionalMatSelectDirective import {

问题 How can I add dynamically empty mat-option to all not required mat-select in my app. like : <mat-form-field appearance="outline"> <mat-label>HMO</mat-label> <mat-select> <--how can I add this dynamically--> <mat-option>--</mat-option> <mat-option *ngFor="let hmo of HMOList" [value]="hmo.Code"> {{ hmo.Desc }} </mat-option> </mat-select> </mat-form-field> any idea? 回答1: I used the response from Prince, but my model didn't update. And I added the following in OptionalMatSelectDirective import {

问题 I want to use Angular Material tabs https://material.angular.io/components/tabs with a router navigation in the tabs. I tried to use <nav mat-tab-nav-bar> as indicated in the doc, and I found this tutorial: https://nirajsonawane.github.io/2018/10/27/Angular-Material-Tabs-with-Router/ where I can find a template like that: <nav mat-tab-nav-bar> <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive"> {{link.label}}

问题 I want to use Angular Material tabs https://material.angular.io/components/tabs with a router navigation in the tabs. I tried to use <nav mat-tab-nav-bar> as indicated in the doc, and I found this tutorial: https://nirajsonawane.github.io/2018/10/27/Angular-Material-Tabs-with-Router/ where I can find a template like that: <nav mat-tab-nav-bar> <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive"> {{link.label}}

问题 I want align button right corner of the dialog below is my html <div mat-dialog-content> <p>What's your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat-form-field> </div> <div mat-dialog-actions> <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button> </div> demo 回答1: You can use the align HTML attribute: <div mat-dialog-content> <p>What's your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat

问题 I want align button right corner of the dialog below is my html <div mat-dialog-content> <p>What's your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat-form-field> </div> <div mat-dialog-actions> <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button> </div> demo 回答1: You can use the align HTML attribute: <div mat-dialog-content> <p>What's your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat

问题 I want align button right corner of the dialog below is my html <div mat-dialog-content> <p>What's your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat-form-field> </div> <div mat-dialog-actions> <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button> </div> demo 回答1: You can use the align HTML attribute: <div mat-dialog-content> <p>What's your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat

问题 For implementing a spy nav bar in my Angular app in a MatDialog component. I implemented a directive to spy for the scroll event using @HostListener('window:scroll', ['$event']) I also tried 'scroll' as event name. But the event does not seem to fire. I tried several approaches, e. g. by using the HostListener directly in the dialog component, by using the JavaScript window.onscroll() function and the rxjs fromEvent() function but without success. Trying other css events (e. g. window:click )