Angular Material with Angular 5

Install the latest version of Angular Material + Animations using npm to get started.

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

Import the required files as shown below, based on the components you will be using.

main.ts

import './polyfills';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {
  MatSlideToggleModule
} from '@angular/material';
import {HttpModule} from '@angular/http';
import {HttpClientModule} from '@angular/common/http';
import {CdkTableModule} from '@angular/cdk/table';

import {MaterialExample} from './app/material-example';

@NgModule({
  exports: [
    CdkTableModule,
    MatSlideToggleModule
  ]
})
export class DemoMaterialModule {}

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
    DemoMaterialModule
  ],
  entryComponents: [MaterialExample],
  declarations: [MaterialExample],
  bootstrap: [MaterialExample],
  providers: []
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

This is an example of how angular material can be used. This example shows how a material slider toggle switch can be used to switch between checked and unchecked states.

material-example.html

 <mat-slide-toggle
          class="some-margin"
          [color]="color"
          [checked]="checked"
          [disabled]="disabled"
(change)="thisChanges($event)">
        Slider
</mat-slide-toggle>

material.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'material-example',
  templateUrl: 'material-example.html',
  styleUrls: ['material-example.scss'],
})
export class MaterialExample {
  color = 'accent';
  checked = false;
  disabled = false;

 public thisChanges = (e) => console.log(e.checked);
}

Related