







Step-1 Firstly Install Nodejs if you did not install Nodejs see my previous post.



https://www.softwarequery.com/2018/06/how-to-install-nodejs-via-command-on.html



Step-2 After Install Nodejs install an Ionic Angular Material open Cmd then Write this Commands.

Firstly Install Nodejs if you did not install Nodejs see my previous post.After Install Nodejs install an Ionic Angular Material open Cmd then Write this Commands.

ionic start devdacticMaterial blank cd devdacticMaterial ng add @angular/material

Step-3

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule {}

Step-4.

app/material.module.ts

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule {}

Step-5.

app/home/home.page.ts

import { Component, OnInit, ViewChild } from "@angular/core"; import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material'; @Component({ selector: "app-home", templateUrl: "home.page.html", styleUrls: ["home.page.scss"] }) export class HomePage implements OnInit { displayedColumns: string[] = ['first_name', 'last_name', 'twitter']; dataSource = new MatTableDataSource ([ { first_name: 'Saam', last_name: 'smith', twitter: 'max' }, { first_name: 'denny', last_name: 'don', twitter: 'dom' }, { first_name: 'mark' last_name: 'sam', twitter: 'sam' } ]); @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; ngOnInit() { this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; } }

Step-6.

app/home/home.page.html

First Name {{user.first_name}} Last Name {{user.last_name}} Twitter {{user.twitter}}

After Install Angular Material then go tothen copy-paste this code.In this Step importing all Modules use the Material Components. Go tofile then open this file and copy-paste this code.In this Step, We are Create a Table with Sorting, Filtering, and Pagination using Angular Material in ionic. Go tofile then open file then copy-paste this code.In this step, We are going tofile then open file pate a code to implement a front end part of the table.