https://material.angular.io/components/categories
ng add @angular/material // install angular material into the project , don't forget to accept all questions you are faced with
Usually , we create a separate Module name it Material Module and put all the components in an array then put this array into the imports and exports of the Material Module
Then importing the Material Module into the app.module.ts file makes all these components available for use into our application normally.
@Material Module
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
const MaterialComponents =[
MatButtonModule
];
@NgModule({
declarations: [],
imports: [
MaterialComponents
] ,
exports: [
MaterialComponents
]
})
export class MaterialModule { }
@App Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule ,
MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
2- to add a button
in app.module.ts
import { MatButtonModule } from '@angular/material';
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule ,
MatButtonModule
],
in app.component.html
<button mat-raised-button>Hellow World</button>
3- It is better to generate separate module for angular material components
ng generate module material
at the material.module.ts
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
const MaterialComponents =[
MatButtonModule
];
@NgModule({
declarations: [],
imports: [
MaterialComponents
] ,
exports: [
MaterialComponents
]
})
export class MaterialModule { }
at app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule ,
MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
3- to display text with different sizes
<div class="mat-display-4"> This is the text <div>
<div class="mat-display-3"> This is the text <div>
<div class="mat-display-2"> This is the text <div>
<div class="mat-display-1"> This is the text <div>
and also
<div class="mat-headline"> This is the text of h1 <div>
<div class="mat-title"> This is the text of h2<div>
<div class="mat-subheading-2"> This is the text of h3<div>
<div class="mat-subheading-1"> This is the text of h4<div>
and also
<div class="mat-body-1"> This is the text body<div>
<div class="mat-body-2"> This is the bold text body<div>
<div class="mat-caption"> This is the caption text<div>
or you can use this way it will give the same result:-
<div class="mat-typography">
<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
</div>
4- Material Design Buttons :-
to use the material buttons you need to import MatButtonModule from @angular/material/button
examples
<div>
<button mat-button>click me </button>
<button mat-raised-button>click me </button>
<button mat-flat-button>click me </button>
<button mat-stroked-button>click me </button>
<button mat-icon-button>click me </button>
<button mat-fab>click me </button>
<button mat-mini-fab>click me </button>
<button color="primary" mat-button>click me </button>
<button color="accent" mat-button>click me </button>
<button color="warn" mat-button>click me </button>
<button color="primary" mat-raised-button>click me </button> ///// this is the best button color and effect
<button color="accent" mat-raised-button>click me </button>
<button color="warn" mat-raised-button>click me </button>
</div>
5- to use mat-button-toggle
import MatButtonToggleModule from '@angular/material'; and put it in the imports array
in the html
<mat-button-toggle #toggleBtn>Toggle</mat-button-toggle>
{{ toggleBtn.checked }}
or
The value property evaluates to the overall group value and in this case it acts like a radio button
<mat-button-toggle-group #toggleGroup="matButtonToggleGroup">
<mat-button-toggle value="angular">Angular</mat-button-toggle>
<mat-button-toggle value="react">React</mat-button-toggle>
</mat-button-toggle-group>
{{toggleGroup.value}}
to act like a check box add the multiple attribute
<mat-button-toggle-group #toggleGroup="matButtonToggleGroup" multiple>
<mat-button-toggle value="angular">Angular</mat-button-toggle>
<mat-button-toggle value="react">React</mat-button-toggle>
</mat-button-toggle-group>
{{toggleGroup.value}}
6- Icons
import MatIconModule from '@angular/material' and add it to the imports array
go to https://material.io/tools/icons
click the desired icon and get it's name and put it inside the tag
<mat-icon color="primary">grade</mat-icon>
7- Badges : are icon notifications that are displayed over certain text
import {MatBadgeModule} from '@angular/material/badge'; and add it to the imports array
<span matBadge="5">Notification</span>
or to change position of badge using
<span matBadge="5" matBadgePosition="below before">Notification</span>
to control size of badge small , medium , large
<span matBadge="5" matBadgeSize="small">Notification</span>
to control color of badge primary , accent , warn
<span matBadge="5" matBadgeColor="primary">Notification</span>
to control whether badge overlaps with text under it
<span matBadge="5" matBadgeOverlap="false">Notification</span>
or dynamically
<span [matBadge]="propertyName" [matBadgeHidden]="propertyName === 0">Notification</span>
8- Mat Progress Spinner
import {MatProgressSpinnerModule} from '@angular/material';
<mat-progress-spinner value="40" ></mat-progress-spinner>
or using this component to show a loading status , color is : primary / accent /warn
<mat-spinner *ngIf="showSpinner" color="primary"></mat-spinner>
9- Navbar Component
import {MatToolbarModule} from '@angular/material'; and add to the imports array
color : primary / Accent / warn
<mat-toolbar color="primary" class="navbar">
<div> Code Evolution </div>
<div>
<span> Home </span>
<span> About </span>
<span> Services</span>
</div>
</mat-toolbar>
at Css
.navbar {
justify-content: space-between;
}
span {
padding-right: 1rem;
}
11- SideNav Component
import { MatSidenavModule } from '@angular/material';
mode = over/push/side
<mat-sidenav-container>
<mat-sidenav #sidenav mode="side" [(opened)]="openedFlag"> Sidenav </<mat-sidenav>
<mat-sidenav-content> Main
<button (click)="openedFlag=!openedFlag"> Toggle openned </button>
<button (click)="sidenav.open()"> Open</button>
<button (click)="sidenav.close()"> Close</button>
<button (click)="sidenav.toggle()"> Toggle </button>
</mat-sidenav-content
</mat-sidenav-container>
at Css file
mat-sidenav-container
{
height: 100%;
}
mat-sidenav , mat-sidenav-content
{
padding: 16px;
}
mat-sidenav
{
background-color: lightcoral;
width: 200px;
}
12- Menu
import {MatMenuModule} from '@angular/material';
<mat-menu #appMenu="matMenu" xPosition="after" yPosition="above">
<button mat-menu-item [matMenuTriggerFor]="subMenu">Front End</button>
<button mat-menu-item>Back End</button>
</mat-menu>
<button mat-flat-button [matMenuTriggerFor]="appMenu">Menu</button>
<mat-menu #subMenu="matMenu">
<button mat-menu-item>Angular</button>
<button mat-menu-item>React</button>
</mat-menu>
to lazy load menu items in menus untill the menu is opened use the below
<mat-menu #lazyMenu="matManu">
<ng-template matMenuContent let-name="name" let-hobby="hobby">
<button mat-menu-item>Settings</button>
<button mat-menu-item>Logout {{name}} And your Hoppy is {{hobby}}</button>
</ng-template>
</mat-menu>
<button mat-raised-button
[matMenuTriggerData]="{ name : 'Mahmoud' , hoppy: 'football'}"
[matMenuTriggerFor]="lazyMenu"> Mahmoud Button </button>
13- List
import {MatListModule} from '@angular/material';
import {MatDividerModule} from '@angular/material';
<mat-list dense>
<mat-list-item>Item 1</mat-list-item>
<mat-list-item>Item 2</mat-list-item>
</mat-list>
to create a navigational list
<mat-nav-list>
<a mat-list-item href="#">Home</a>
<a mat-list-item href="#">About</a>
</mat-nav-list>
we can use the navigational list with the side nav component to create the items of the side nav
or with icons like , This is very Suitable to display data List items
<mat-list>
<mat-list-item>
<mat-icon matListIcon>home</mat-icon>
<h3 matLine> Heading </h3>
<p matLine> Line </p>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<mat-icon matListIcon>folder</mat-icon>
<h3 matLine> Heading 2</h3>
<p matLine> Line 2</p>
</mat-list-item>
</mat-list>
14- Grid List
import {MatGridListModule} from '@angular/material';
<mat-grid-list cols="2" gutterSize="10px" rowHeight="100px"> // or rowHeight="2:1" which means that height is half the width
<mat-grid-tile rowspan="2">Tile 1</mat-grid-tile>
<mat-grid-tile>Tile 2</mat-grid-tile>
<mat-grid-tile colspan="2">Tile 3</mat-grid-tile>
<mat-grid-tile>Tile 4</mat-grid-tile>
</mat-grid-list>
15- Expansion Panel / Accordions
import {MatExpansionModule} from '@angular/material';
<mat-accordion multi="true">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Angular Fundamental
</mat-panel-title>
<mat-panel-description>
Total Duration : 3 hours
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the panel content , Add course details</p>
<mat-action-row>
<button mat-button> Enroll </button>
</mat-action-row>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Angular material
</mat-panel-title>
<mat-panel-description>
Total Duration : 2 hours
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the panel content , Add course details</p>
<mat-action-row>
<button mat-button> Enroll </button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
16- Cards
import {MatCardModule} from '@angular/material'
<mat-card>b
<mat-card-title>
card Title
</mat-card-title>
<mat-card-content>
This is the card content
</mat-card-content>
<mat-card-actions align="end">
<button mat-flat-button>Login<button>
</mat-card-actions>
</mat-card>
17- Tabs
import { MatTabsModule } from '@angular/material';
<mat-tab-group #tabRef (selectedTabChange)="logChanges(tabRef.selectedIndex)"> // logChanges() is a function
<mat-tab label="Angular">Angular Content</mat-tab>
<mat-tab label="React">React Content</mat-tab>
<mat-tab label="Vue">Vue Content</mat-tab>
</mat-tab-group>
{{ tabRef.selectedIndex }}
18- Stepper (Train)
import { MatStepperModule } from '@angular/material';
<mat-horizontal-stepper linear>
<mat-step label="Shipping Address" completed="true">
<p>Shipping Address Details</p>
</mat-step>
<mat-step label="Billing Address" completed="false" optional> // now we can navigate between one and two because one is completed
<p>Billing Address Details</p>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Place Order" completed="false">
<p>Place Order</p>
</mat-step>
</mat-horizontal-stepper>
You can also use <mat-vertical-stepper>
19- Input (Forms)
import {MatFormFieldModule , MatInputModule} from '@angular/material';
<mat-form-field floatLabel="never" appearance="legacy" color="primary"> // floatLabel : never or always or auto // appearance=legacy or standard or fill or outline // color="primary" or accent or warn
<mat-label>Name</mat-label>
<input matInput required>
<mat-hint align="end">Min 5 characters</mat-hint>
</mat-form-field>
20- Select
import {MatSelectModule} from '@angular/material';
<mat-form-field>
<mat-label>Topic</mat-label>
<mat-select [(value)]="selectedValue" multiple>
<mat-option >None</mat-option>
<mat-option value="angular">Angular</mat-option>
<mat-option value="react">React</mat-option>
<mat-option value="vue">Vue</mat-option>
</mat-select>
</mat-form-field>
21- Auto Complete
import {MatAutocompleteModule} from '@angular/material';
import {ReactiveFormsModule} from '@angular/forms';
<form>
<mat-form-field>
<input type="text" matInput [matAutocomplete]="auto" [formControl]="myControl"/>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
import {Observable} from 'rxjs';
import {map , startWith} from 'rxjs/operators';
options: string[] = ['Angular' , 'React' , 'Vue'];
myControl = new FormControl();
filteredOptions : Observable<string[]>;
ngOnInit()
{
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
map(value => this.filter(value))
);
}
private filter(value : string) : string[]
{
const filterValue = value.toLowerCase();
return this.options.filter( option=> option.toLowerCase().includes(filterValue));
}
22- Check Box and Radio Button
import {MatCheckboxModule} from '@angular/material';
<mat-checkbox labelPosition="before" color="primary">
Subscribe
</mat-checkbox>
import {MatRadioModule} from '@angular/material';
import {FormsModule} from '@angulat/forms'
<mat-radio-group [(ngModel)] = "propertyName"> // This to access the value of the radio group
<mat-radio-button value="angular" color="primary">Angular</mat-radio-button>
<mat-radio-button value="react" color="primary">React</mat-radio-button>
<mat-radio-button value="vue" color="primary">Vue</mat-radio-button>
</mat-radio-group>
23- Date Picker
import {MatDatepickerModule , MatNativeDateModule} from '@angular/material';
<mat-form-field>
<input matInput [matDatepicker]="myDatePicker" [matDatepickerFilter]="dateFilter" [min]="minDate" [max]="maxDate">
<mat-datepicker-toggle [for]="myDatePicker" matSuffix></mat-datepicker-toggle>
<mat-datepicker #myDatePicker > </mat-datepicker>
</mat-form-field>
minDate = new Date();
maxDate = new Date(2019,3,10); // 10-APR-2019
// prevent saturday and sunday from being selected
dateFilter = date => {
const day = date.getDay();
return day =/= 0 && day =/= 6;
}
24- Tooltips
import { MatTooltipModule } from '@angular/material';
<button mat-raised-button matTooltip="welcome" matTooltipPosition="after" matTooltipShowDelay="2000" matToolTipHideDelay="2000">hello</button>
25- Snake bar (Confirmation Messages)
import { MatSnackBarModule } from '@angular/material';
<button mat-button (click)="openSnackBar('Item deleted','Undo')"> Delete </button>
@ class
-------
import {MatSnackBar} from '@angular/material';
constructor(private snackBar : MatSnackBar)
{
}
openSnackBar(message , action)
{
let snakeBarRef = this.snackBar.open(message , action , {duration: 2000});
snakeBarRef.afterDismissed().subscribe(
()=> {
console.log('Snack bar dismissed');
}
);
snakeBarRef.onAction().subscribe(
()=> {
console.log('the snack bar action was triggered');
}
);
}
26- Dialog
import {MatDialogModule} from '@angular/material';
<button mat-raised-button (click)="openDialog()">Open Dialog</button>
AT app.module.ts
import the dialog component class and put it in the entryComponents Array
@NgModule({
declarations: [AppComponent , DialogExampleComponent ]
entryComponents: [DialogExampleComponent],
imports : [...
AT component Class :-
import {MatDialog} from '@angular/material';
constructor(public dialog:MatDialog){}
openDialog()
{
let dialogRef = this.dialog.open(DialogExampleComponent , { data:{name:'MG'} } );
dialogRef.afterClosed().subscribe(
result => {
console.log(`Dialog result: $result`);
}
);
}
AT DialogExampleComponent html
<h2 mat-dialog-title> Session Timeout</h2>
<mat-dialog-content> hi {{ data.name }} you will be logged out due to inactivity</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close mat-dialog-close="true">Keep me logged in </button>
<button mat-button mat-dialog-close mat-dialog-close="false"> Logout </button>
</mat-dialog-actions>
AT DialogExampleComponent class
import {Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';
constructor(@Inject(MAT_DIALOG_DATA) public data : any){}
27- Data Table (Check The online docs https://material.angular.io/components/table/examples )
import {MatTableModule} from '@angular/material';
AT HTML
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row (click)=editRow(row) *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
AT Component Class
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];
export class AppComponents {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
editRow(row)
{
console.log(row); // display the current selected record
}
}
28- Exploring Data Tables
check https://www.youtube.com/watch?v=mogliLm_mII&list=PLC3y8-rFHvwilEuCqFGTL5Gt5U6deIrsU&index=28
29- Data Table Filtering
check https://www.youtube.com/watch?v=ZhcYPXLGr_E&list=PLC3y8-rFHvwilEuCqFGTL5Gt5U6deIrsU&index=29
AT Component Class
import {MatTableDataSource} from '@angular/material';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];
export class AppComponents {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
editRow(row)
{
console.log(row); // display the current selected record
}
}
applyFilter(filterValue : string)
{
this.dataSource.filter = filterValue.trim().toLowerCase();
}
AT HTML
<mat-form-field>
<input matInput placeholder="filter" (keyup)="applyFilter($event.target.value)" >
</mat-form-field>
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row (click)=editRow(row) *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
30- Data Table Sorting
import {MatSortModule} from '@angular/material';
AT HTML
<mat-form-field>
<input matInput placeholder="filter" (keyup)="applyFilter($event.target.value)" >
</mat-form-field>
<mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell mat-sort-header *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell mat-sort-header *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell mat-sort-header *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell mat-sort-header *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row (click)=editRow(row) *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
AT Component Class
import {MatTableDataSource , MatSort} from '@angular/material';
import { Component , ViewChild , OnInit } from '@angular/core';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];
export class AppComponents implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatSort) sort : MatSort;
ngOnInit()
{
this.dataSource.sort = this.sort;
}
editRow(row)
{
console.log(row); // display the current selected record
}
}
applyFilter(filterValue : string)
{
this.dataSource.filter = filterValue.trim().toLowerCase();
}
31- Data Table Pagination
import {MatPaginatorModule} from '@angular/material';
AT HTML
<mat-form-field>
<input matInput placeholder="filter" (keyup)="applyFilter($event.target.value)" >
</mat-form-field>
<div class="mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort >
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell mat-sort-header *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell mat-sort-header *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell mat-sort-header *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell mat-sort-header *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row (click)=editRow(row) *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator >
</div>
AT Component Class
import {MatTableDataSource , MatSort , MatPaginator} from '@angular/material';
import { Component , ViewChild , OnInit } from '@angular/core';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];
export class AppComponents implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatSort) sort : MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit()
{
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
editRow(row)
{
console.log(row); // display the current selected record
}
}
applyFilter(filterValue : string)
{
this.dataSource.filter = filterValue.trim().toLowerCase();
}
32- Virtual Scrolling
import {ScrollingModule} from '@angular/cdk/scrolling';
AT HTML
<cdk-virtual-scroll-viewport itemSize="100">
<div *cdkVirtualFor="let number of numbers">
{{ number }}
</div>
</cdk-virtual-scroll-viewport>
33- To Create a responsive navigation toolbar and menu in angular +6
ng generate @angular/material:material-nav --name=main-nav
No comments:
Post a Comment