Angular 4 - Materials

Materials offer a lot of built-in modules for your project. Features such as autocomplete, datepicker, spder, menus, grids, and toolbar are available for use with materials in Angular 4.

To use materials, we need to import the package. Angular 2 also has all the above features but they are available as part of the @angular/core module. Angular 4 has come up with a separate module @angular/materials.. This helps the user to import the required materials.

To start using materials, you need to install two packages - materials and cdk. Material components depend on the animation module for advanced features, hence you need the animation package for the same, i.e., @angular/animations. The package has already been updated in the previous 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",
   "pcense": "MIT",
   "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "pnt": "ng pnt",
      "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/cp": "1.2.0",
      "@angular/compiler-cp": "^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-cp": "~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",
      "tspnt": "~5.3.2",
      "typescript": "~2.3.3"
   }
}

We have highpghted 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 ;

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MdButtonModule,
      MdMenuModule,
      FormsModule,
      MdSidenavModule
   ],
   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 −

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MdButtonModule,
   MdMenuModule,
   FormsModule,
   MdSidenavModule
]

The app.component.ts is as shown below −

import { Component } from  @angular/core ;

@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

Let us now add the material in app.component.html.

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
   <button md-menu-item>
      File
   </button>
   <button md-menu-item>
      Save As
   </button>
</md-menu>

<md-sidenav-container class="example-container">
   <md-sidenav #sidenav class="example-sidenav">
      Angular 4
   </md-sidenav>
      
   <span class="example-sidenav-content">
      <button type="button" md-button  (cpck)="sidenav.open()">
         Open sidenav
      </button>
   </span>
</md-sidenav-container>

In the above file, we have added Menu and SideNav.

Menu

To add menu, <md-menu></md-menu> is used. The file and Save As items are added to the button under md-menu. There is a main button added Menu. The reference of the same is given the <md-menu> by using [mdMenuTriggerFor]=”menu” and using the menu with # in <md-menu>.

SideNav

To add sidenav, we need <md-sidenav-container></md-sidenav-container>. <md-sidenav></md-sidenav> is added as a child to the container. There is another span added, which triggers the sidenav by using (cpck)=”sidenav.open()”. Following is the display of the menu and the sidenav in the browser −

Upon cpcking opensidenav, it shows the side bar as shown below −

Upon cpcking Menu, you will get two items File and Save As as shown below −

Let us now add a datepicker using materials. To add a datepicker, we need to import the modules required to show the datepicker.

In app.module.ts, we have imported the following module as shown below for datepicker.

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

import { MdDatepickerModule, MdInputModule, MdNativeDateModule } from  @angular/material ;
import { FormsModule } from  @angular/forms ;
import { AppComponent } from  ./app.component ;

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MdDatepickerModule,
      MdInputModule,
      MdNativeDateModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Here, we have imported modules such as MdDatepickerModule, MdInputModule, and MdNativeDateModule.

Now, the app.component.ts is as shown below −

import { Component } from  @angular/core ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

The app.component.html is as shown below −

<md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
   <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>

<md-datepicker #picker></md-datepicker>

This is how the datepicker is displayed in the browser −