angular-material2

How to correctly register font-awesome for md-icon?

by

In your AppModule add: import { MatIconModule, MatIconRegistry } from ‘@angular/material’; Then add MatIconModule to your imports e.g.: imports: [… MatIconModule …] Add MatIconRegistry to your providers: providers: [… MatIconRegistry ….] Then add the following to your AppModule class: export class AppModule { constructor( …public matIconRegistry: MatIconRegistry) { matIconRegistry.registerFontClassAlias(‘fontawesome’, ‘fa’); } Then you can use … Read more

Select All mat option and deselect All

by

Use code as below create function on click each mat-option and select()/deselect() all option: See stackblitz:https://stackblitz.com/edit/angular-material-with-angular-v5-jsgvx6?file=app/app.component.html TS: togglePerOne(all){ if (this.allSelected.selected) { this.allSelected.deselect(); return false; } if(this.searchUserForm.controls.userType.value.length==this.userTypeFilters.length) this.allSelected.select(); } toggleAllSelection() { if (this.allSelected.selected) { this.searchUserForm.controls.userType .patchValue([…this.userTypeFilters.map(item => item.key), 0]); } else { this.searchUserForm.controls.userType.patchValue([]); } } HTML: <form [formGroup]=”searchUserForm” fxFlex fxLayout=”column” autocomplete=”off” style=”margin: 30px”> <mat-select placeholder=”User Type” … Read more

use mat-datepicker directly without input

by

turns out this is pretty straightforward import the MatDatePickerModule as per usual and then simply use the mat-calendar selector <mat-calendar></mat-calendar> In order to hook into the selection via typescript @ViewChild(MatCalendar) _datePicker: MatCalendar<Date> ngOnInit() { this._datePicker.selectedChange.subscribe(x => { console.log(x); }); }

Material radio button change event Angular 4

by

For Material version >= 6, refer to the following answer: https://stackoverflow.com/a/46037191/1791913 The following answer is for Material version < 6: This happens because the change event is fired before the model has been updated. So your selected property has the previous value. Change your code to following to get the event on (change): <md-radio-group [(ngModel)]=”selected”> … Read more

Customize Angular Material 2 Tooltip styles

by

If you want to customize the css of the tooltip, then you can use ::ng-deep. Add the following styles in your component’s styles: ::ng-deep .mat-tooltip { /* your own custom styles here */ /* e.g. */ color: yellow; } Another option is to set the View Encapsulation to None in your component: @Component({ templateUrl: ‘./my.component.html’, styleUrls: [‘./my.component.css’], … Read more

How to open mat-menu programmatically?

by

You need to get hold of MatMenuTrigger instance from [matMenuTriggerFor] element #menuTrigger=”matMenuTrigger” [matMenuTriggerFor]=”menu” where #menuTrigger is the template reference variable matMenuTrigger is exportAs property of MatMenuTrigger metadata and then simply call (click)=”menuTrigger.openMenu()” Stackblitz example Read more about template reference variable here What is #auto attribute here and why it is required

Usage of [mat-dialog-close]

by

Set your button to have disabled on it if the form is not valid. This way the button cannot be clicked unless the form is valid, meaning it won’t close unless the form is valid <button type=”submit” (click)=”addUser()” mat-dialog-close [disabled]=”formisvalid” mat-button>Submit</button>

Open matAutocomplete with open openPanel() method

by

The Material documentation should be clearer. Whilst there are various gymnastic routines you can do to achieve this functionality (like manipulating the document object, using @ViewChild, or creating event listeners), for me it boils down to the two following ways: 1 Minimalist: <mat-form-field> <input #nameInput matInput formControlName=”name” #trigger=”matAutocompleteTrigger” [matAutocomplete]=”autoName”> <mat-autocomplete #autoName=”matAutocomplete”> <mat-option *ngFor=”let o of … Read more