Angular 4 Materials

Materials offer a great built of modules for your task. Features , for example, autocomplete, datepicker, slider, menus, frameworks, and toolbar are available for use with materials in Angular 4.

To use materials, we have to import the bundle. Precise 2 likewise has all the above features yet they are available as a major aspect of the @angular/center module. Precise 4 has thought of a different module @angular/materials.. This helps the user to import the required materials.

To begin utilizing materials, you have to introduce two bundles - materials and cdk. Material segments rely upon the movement module for cutting edge highlights, henceforth you need the activity bundle for the equivalent, i.e., @angular/livelinesss. The bundle has just been refreshed in the past chapter.

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

Let us now see the package.json. @angular/material and @angular/cdk are installed.

   "name": "angularstart",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   "private": true,
   "dependencies": {
      "@angular/animations": "^4.0.0",
      "@angular/cdk": "^2.0.0-beta.8",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.8",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.1.0",
      "zone.js": "^0.8.4"
   "devDependencies": {
      "@angular/cli": "1.2.0",
      "@angular/compiler-cli": "^4.0.0",
      "@angular/language-service": "^4.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~3.0.4",
      "tslint": "~5.3.2",
      "typescript": "~2.3.3"

We have highlighted the packages that are installed to work with materials.

We will now import the modules in the parent module - app.module.ts as shown below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

   declarations: [
   imports: [
   providers: [],
   bootstrap: [AppComponent]
export class AppModule { }

In the above file, we have imported the following modules from @angular/materials.

import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

And the same is used in the imports array as shown below −