Post
Ask Question

Material Sidenav And Datatable Using Angular 6

Introduction
 
With the release of Angular 6.0, one of the new features added is called Angular Material Starter Component. We can make use of various starter components which are listed below.
  • Material Dashboard
  • Material Sidenav
  • Material Datatable
Learn more about how can we install and implement Material Dashboard here:
In this article, we are going to implement Material Sidenav and Material Datatable Starter Component one by one.
 
Installation 
 
To work with Material Starter Component with the release of Angular 6.0, we should install it using the below ng command.
  1. ng add @angular/material  
Basically, it is a tooling package which can be installed by using the node package manager, after completion of installation using the above command, now open package.json and you can see that two packages are updated @angular/material as well as @angular/cdk with the latest version 6.0.0.
 
 
 
So far we have finished the installation part, now it's time to implement our starter component.
 
Material Sidenav
 
Sidenav is a material component which provides us collapsible side navigation and drawer component. To generate sidenav, we need to execute the below ng command, which generates a few numbers of a file into our current working directory. 
  1. ng generate @angular/material:material-nav --name=MyNavigation  
After running the above ng command, a few files are generated and you can see all of them in the below image.
 
 
 
Now just open my-navigation.component.html file, and you can see the complete code generated for the sidebar navigation.
 
 
Basically it contains a group of material components, and by combining it will generate side navigation with drawer component, and few of the components used are:
  • <mat-sidenav-container>
  • <mat-sidenav>
  • <mat-toolbar>
  • <mat-sidenav-content>
Now open my-navigation.component.ts file and you can see a snippet like the following.
  1. import { Component } from '@angular/core';  
  2. import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';  
  3. import { Observable } from 'rxjs';  
  4.   
  5. @Component({  
  6.   selector: 'my-navigation',  
  7.   templateUrl: './my-navigation.component.html',  
  8.   styleUrls: ['./my-navigation.component.css']  
  9. })  
  10. export class MyNavigationComponent {  
  11.   isHandset: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);  
  12.   constructor(private breakpointObserver: BreakpointObserver) {}  
  13. }  
The above code snippet contains observables for BreakpointState, which is used for evaluating layout.
 
The last move is to run the sidenav component that we have generated, to do this just open the app.component.html file and remove all of the content then replace with the following lines of code.
  1. <!-- To render sidenav into home component -->  
  2.   
  3. <my-navigation>  
  4.   
  5. </my-navigation>  
We have finished all changes, by running our application we can get  output like the below image.
 
 
 
Material Datatable 
 
Material datatable is a very useful component by Angular/Material, which provides us with various features like pagination, filter, sorting etc.
 
Using Material Datatable starter component, we can get a pre-configured datatable with assigned data and a few useful features like pagination, sorting by just running a single line of command. Isn't it great?
 
Run the following command into the console and a few files will be generated to create a complete working data table.
  1. ng generate @angular/material:material-table --name=my-datatable  
You can see a number of files will be generated, including datasource, to fill records inside the datatable. 
 
Open my-datatable.component.html file, it contains group of material components.
  1. <div class="mat-elevation-z8">  
  2.  <!-- Material Table -->  
  3.   <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">  
  4.   
  5.     <!-- Id Column -->  
  6.     <ng-container matColumnDef="id">  
  7.       <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>  
  8.       <mat-cell *matCellDef="let row">{{row.id}}</mat-cell>  
  9.     </ng-container>  
  10.   
  11.     <!-- Name Column -->  
  12.     <ng-container matColumnDef="name">  
  13.       <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>  
  14.       <mat-cell *matCellDef="let row">{{row.name}}</mat-cell>  
  15.     </ng-container>  
  16.   
  17.     <!-- Matrial row header -->  
  18.     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>  
  19.     <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>  
  20.   </mat-table>  
  21.   
  22.   <!-- Material Datatable Pagination -->  
  23.   <mat-paginator #paginator  
  24.     [length]="dataSource.data.length"  
  25.     [pageIndex]="0"  
  26.     [pageSize]="50"  
  27.     [pageSizeOptions]="[25, 50, 100, 250]">  
  28.   </mat-paginator>  
  29. </div>  
Different components are combined and act as a Datatable, and a few of the main components are listed below.
  • <mat-table> 
  • <mat-header-cell> 
  • <mat-cell> 
  • <mat-header-row>
  • <mat-row>
  • <mat-paginator>
For displaying records into the datatable, there is a datasource file created while generating the datatable and the main task of that file is to assign records to datatable, now just open my-datatable-datasource.ts file
  1. const EXAMPLE_DATA: MyDatatableItem[] = [  
  2.   {id: 1, name: 'Hydrogen'},  
  3.   {id: 2, name: 'Helium'},  
  4.   {id: 3, name: 'Lithium'},  
  5.   {id: 4, name: 'Beryllium'},  
  6.   {id: 5, name: 'Boron'},  
  7.   {id: 6, name: 'Carbon'},  
  8.   {id: 7, name: 'Nitrogen'},  
  9.   {id: 8, name: 'Oxygen'},  
  10.   {id: 9, name: 'Fluorine'},  
  11.   {id: 10, name: 'Neon'},  
  12.   {id: 11, name: 'Sodium'},  
  13.   {id: 12, name: 'Magnesium'},  
  14.   {id: 13, name: 'Aluminum'},  
  15.   {id: 14, name: 'Silicon'},  
  16.   {id: 15, name: 'Phosphorus'},  
  17.   {id: 16, name: 'Sulfur'},  
  18.   {id: 17, name: 'Chlorine'},  
  19.   {id: 18, name: 'Argon'},  
  20.   {id: 19, name: 'Potassium'},  
  21.   {id: 20, name: 'Calcium'},  
  22. ];  
As you can see in the above code snippet, in datasource file there are 20 records added to fill the datatable, to define datasource to datatable we need to provide object of datasource to datatable property by my-datatable.component.ts file  
  1. import { Component, OnInit, ViewChild } from '@angular/core';  
  2. import { MatPaginator, MatSort } from '@angular/material';  
  3. import { MyDatatableDataSource } from './my-datatable-datasource';  
  4.   
  5. @Component({  
  6.   selector: 'my-datatable',  
  7.   templateUrl: './my-datatable.component.html',  
  8.   styleUrls: ['./my-datatable.component.css']  
  9. })  
  10. export class MyDatatableComponent implements OnInit {  
  11.   @ViewChild(MatPaginator) paginator: MatPaginator;  
  12.   @ViewChild(MatSort) sort: MatSort;  
  13.   dataSource: MyDatatableDataSource;  
  14.   
  15.   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */  
  16.   displayedColumns = ['id', 'name'];  
  17.   
  18.   // Provided datasource to datatable  
  19.   ngOnInit() {  
  20.     this.dataSource = new MyDatatableDataSource(this.paginator, this.sort);  
  21.   }  
  22. }  
You are probably wondering how we can assign records to the datatable. For that, there is a property called datasource in datatable where we can define the datasource that we have created into our my-datatable.datasource.ts file.
 
Just open app.component.html and replace source code with the following code. 
  1. <!-- To render Material Datatable into Home Component -->  
  2.   
  3. <my-datatable>  
  4.     
  5. </my-datatable>  
By running our application, we can see that the number of records are assigned to the datatable.
 
 

The above image describes that a few of the main features are implemented like sorting, pagination, and number of records visible per page.
 
Conclusion
 
In this article, we have implemented two types of Angular Material Starter component. This is how we can get started quickly and implement it, and covered a few topics, so let's recap:
  • Types of Angular Material Starter Component
  • Installation of Angular Material
  • Material Sidenav
  • Material Datatable
If I missed something, then do let me know via comments, and download the attached source code and play with it. Thanks for reading!!!


Similar Articles