Angular Material with Ionic 4

Angular Material with Ionic 4
Angular Material with Ionic 4 ,are you looking for an updated material design library to use for your next ionic 4 project? Take a look at Angular Material

Are you looking for an updated material design library to use for your next ionic 4 project? Take a look at Angular Material. With Angular Material we can expect the same fast and consistent output that you are used to in angular applications. Since ionic 4 is built on the newest angular 6 then it will be a breeze to get this set up.

Requirements:

  1. Node.js (Latest)
  2. Ionic 4

Lets first install angular material with node.

npm install --save @angular/material @angular/cdk @angular/animations

Then lets update our app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, 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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCheckboxModule } from '@angular/material';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule, MatButtonModule, MatCheckboxModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Afterwards, we should update our themes to include the relevant css inside global.scss

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Finally add the relevant component import that you want to use in your app . A list of components can be found in the angular material docs. For example inside our home page I will include a select component.

import {MatSelectModule} from '@angular/material/select';;
@NgModule({
imports: [MatSelectModule]
})
export class ListPageModule {}
<mat-form-field>
  <mat-select>
    <mat-option>None</mat-option>
    <mat-option>Option 1</mat-option>
    <mat-option>Option 2</mat-option>
    <mat-option>Option 3</mat-option>
  </mat-select>
</mat-form-field>

Thank you for reading!

Suggest:

Angular Tutorial - Learn Angular from Scratch

Angular 5 vs Angular 6 | What's New in Angular 6 | Features & Updates

Learn Angular 8 from Scratch for Beginners - Crash Course

Angular 6 - What To Expect

Angular and Nodejs Integration Tutorial

Angular Service Worker Tutorial