Skip to main content


Showing posts with the label Angular 6 Material

Material Angular Table Sorting , Material Angular Table Filter , Material Angular Table , Part 2

Material Angular Table Sorting,Filter Part 2 
Do refer materiel table part 1 here, we discussed further. Code Action @ StackBlitz

Sorting   To add sorting behavior to the table, add the matSort directiveto the table and add mat-sort-header to each column header cell that should trigger sorting.
Step 1: Add matSort directive in table tag as below
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"> Step 2: Add mat-sort-header directive to the column which you want to add the sorting,
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDefmat-sort-header> Name</th>
    <td mat-cell *matCellDef="let element"> {{}} </td>
  </ng-container>  Step 3: In component add import MatSort from material
   import {MatSort} from '@angular/material'; Step 4: to add MatSort view child in component
  @ViewChild(MatSort) custsort: MatSort; Step 5: Assign the…

Angular Material for Angular 6,Angular Material for Angular,Angular Material for beginners

Angular with Material Design Creating Angular 6 Project  With Material Design by using below steps 
To create  Angular 6 project refer angular 6 tutorial for beginners step by step and open it from Visual Studio Code. and go with below steps, 
Step 1: Open an Integrated terminal and execute below command npm install --save @angular/material @angular/cdk @angular/animations

Step 2:  Open app.module.ts file and it exists in folder src => app and add Browser Animations Module, Mat Button Module.

Step 3: import  Browser Animations Module into your  project for animation support

import {BrowserAnimationsModule} from'@angular/platform-browser/animations'; @NgModule({ ... imports: [BrowserAnimationsModule], ...
Step 3: Add Angular material prebuild theme globally in styles.css
Step 4: To add Material Button  import MatButtonModule from '@angular/material'

import {MatButtonModule} from '@angular/ma…