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

Angular Material 2 – Disable Ripple?

by

Use disableRipple as an attribute to disable ripples for the md-tab-group as Angular2+ using the Angular material. Just simply do something like this: <md-tab-group disableRipple></md-tab-group> Also if you are using the latest Angular Material, it’s a little bit different like this below: <mat-tab-group [disableRipple]=”true”></mat-tab-group>

What is `cdk` in Angular Material 2 components

by

CDK is the short form of component dev kit. This signifies that these are general-purpose tools for building components that are not coupled to Material Design From the material2 changelog Several components in core/, such as Overlay, have had their prefix changed to cdk- (short for “component dev kit”). This signifies that these are general-purpose … Read more