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:
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!
☞ 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