angular-material-5

问题 Here I am using the angular material form for login form using Angular5. when the applications starts, the login form placeholder couldn't be over-written. But once one I logged in and logged out, then only the input fields would be over written. Screenshot <form [formGroup]="loginform" class="login-form"> <mat-icon style="font-size: 30px ">account_circle</mat-icon> <mat-form-field class="example-full-width"> <input matInput placeholder="Username" formControlName="userName"> </mat-form-field>

问题 I have angular material datasource. angular material version is ^5.0.3 Sorting is working. However for some columns it is sorting incorrectly. where number and text is there. For instance, sorted result like, 'XXX', '1', '1tesxt', '1', 'OPD', OXD', '12'. <mat-table #table [dataSource]="dataSource" matSort > <ng-container matColumnDef="model"> <mat-header-cell *matHeaderCellDef mat-sort-header> Model </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.model}} </mat-cell> </ng

问题 I have 5 buttons occupying 5 columns of a mat-grid . The buttons should behave as toggle buttons and all 5 should belong to a single group. I tried enclosing the mat-grid with mat-button-toggle-group , but still isn't working. Any help is much appreciated. Code : <mat-grid-list cols="11" rowHeight="40px"> <mat-grid-tile > <label>Label 1</label><!-- below buttons should be a single group --> </mat-grid-tile> <mat-grid-tile colspan='2'> <mat-button-toggle >Button 1</mat-button-toggle> </mat

问题 I was trying to use the Material Angular autocomplete and I came across the displayWith function which can be apparently used to be the output that is displayed on selection. I wanted to call a custom function within the display function like displayFn(id) { return this.getValue(id) } getValue(id) { /**return some string } For the autocomplete <mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of outletFilterOptions | async [value]=

问题 I was trying to use the Material Angular autocomplete and I came across the displayWith function which can be apparently used to be the output that is displayed on selection. I wanted to call a custom function within the display function like displayFn(id) { return this.getValue(id) } getValue(id) { /**return some string } For the autocomplete <mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of outletFilterOptions | async [value]=

问题 I'm trying to get the index of row in table, in html, which has been implemented using angular material v5.2. Is there any method available to get the index? The code for reference: <div class="example-container mat-elevation-z8"> <div class="example-header"> <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> </mat-form-field> </div> <mat-table #table [dataSource]="dataSource"> <!-- Position Column --> <ng-container matColumnDef="position"> <mat

问题 I have drop down made with Mat select angular component, I need to trigger an event when I clicked outside of the drop down (body of the page). <mat-select #select multiple (change)="onSubmit($event)" [(ngModel)]="emp"> <mat-option *ngFor="let value of filter.default" [value]="value"> {{value}} </mat-option> </mat-select> Here is my ts file export class AnotherComponent { public text: String; @HostListener('document:click', ['$event']) clickout(event) { if(this.eRef.nativeElement.contains

问题 I have used angular material version: 5.2.1 And wanted to know how to disable their animations, especially the matDialog. I have tried @.disabled but no luck. 回答1: You can use NoopAnimationsModule by angular material import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [NoopAnimationsModule], ... }) export class PizzaPartyAppModule { } Or if you want to remove transition on some specific components you can do it via CSS like this .mat-dialog{

问题 I am using Angular 5 and Angular Material data table for constuction of the data. I'm referring an example in the below site. In this consider I need to include the dynamic data to each row as in the screenshot where 'favorite' is the column header. http://www.devglan.com/angular/angular-data-table-example Sample Json for cross reference. constELEMENT_DATA: Element[ ]=[ { position: 1, firstName: 'John', lastName: 'Doe', email: 'john@gmail.com'favoriteColor: 'red', favorite: { favoriteFood: [

问题 I have an Angular 5 app that must use Angular Material's mat-select inside a Bootstrap modal. The issue is that the dropdown options appear behind the modal. My code looks like this: <mat-form-field class="mdb-form-field form-adjustments"> <mat-select placeholder="What fruit are you looking for?" [formControl]="fruitType" [(ngModel)]="defaultFruitType"> <mat-option *ngFor="let fruitType of fruitTypes" [value]="fruitType">{{ fruitType }} </mat-option> </mat-select> </mat-form-field> I know I