Ionic Angular Material Integration

We can integrate Angular Material in Ionic easily, we have to follow Configuration certain step

ionic new angularMaterial blank

  1. npm install –save @angular/material @angular/cdk @angular/animationse
  2. Adding a custom copy script,  Copy the file copy.config.js file and past in new location with folder name config in the root folder. Ionic includes a copy script file that is called during the build process when you run 
    ionic serve

    and it’s responsible for moving certain resources from to

    node_modules

     the www folder,

  3. Rename the copy.config.ts to copy-custom-libs.js: append the following code along with existing code at the end.
      copyAngularMaterialCss: {
        src: ['{{ROOT}}/node_modules/@angular/material/prebuilt-themes/indigo-pink.css'],
        dest: '{{WWW}}/assets/css'
      }
    }
  4. Open index.html of root folder, add following code in <head>
    <link href=”assets/css/indigo-pink.css” rel=”stylesheet”/>
  5. Last but not least, we need to instruct Ionic that we want to use our new copy script as opposed to the one that is included already. For that, we need to open our package.JSON file and add the following section We can restart our apps, we can use material theme indigo-pink.cs in our apps.
     "config": {
        "ionic_copy": "./config/copy-custom-libs.js"
      },

     Registering material module in app.module.ts file 

    @NgModule({
      declarations: [
        MyApp,
        HomePage
      ],
      imports: [
        MatButtonModule,
        MatSnackBarModule,
        MatFormFieldModule,
        MatInputModule,
        IonicModule.forRoot(MyApp)
      ],

    Note: When using latest angular-material we may get a runtime error if the error is related to rxjs, then we have to install the latest or rxjs 5.5.0.



    Add the following code in src/pages/home/home.html 

    <ion-header>
      <ion-navbar>
        <ion-title>
          IonicAngular Material
        </ion-title>
      </ion-navbar>
    </ion-header>
    <ion-content>
      <mat-form-field>
        <input matInput value="Disco party!" placeholder="Message" #message>
      </mat-form-field>
      
      <mat-form-field>
        <input matInput value="Dance" placeholder="Action" #action>
      </mat-form-field>
      
      <button mat-button (click)="openSnackBar(message.value, action.value)">Show snack-bar</button>
    
      <h3>Raised Buttons</h3>
      <div class="button-row">
        <button mat-raised-button>Basic</button>
        <button mat-raised-button color="primary">Primary</button>
        <button mat-raised-button color="accent">Accent</button>
        <button mat-raised-button color="warn">Warn</button>
        <button mat-raised-button disabled>Disabled</button>
        <a mat-raised-button routerLink=".">Link</a>
      </div>
    </ion-content>

    Add the following code in src/pages/home/home.ts 

    import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    import {MatSnackBar} from '@angular/material';
    
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
    
      constructor(public navCtrl: NavController, public snackBar: MatSnackBar) {
      }
    
      openSnackBar(message: string, action: string) {
        this.snackBar.open(message, action, {
          duration: 2000,
        });
      }
    
    }