Angular Material 7 – List ”; Previous Next The <mat-list>, an Angular Directive, is used to create a container to carry and format a series of items. In this chapter, we will showcase the configuration required to draw a list control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatListModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatListModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-list role = “list”> <mat-list-item role = “listitem”>One</mat-list-item> <mat-list-item role = “listitem”>Two</mat-list-item> <mat-list-item role = “listitem”>Three</mat-list-item> </mat-list> Result Verify the result. Details As first, we”ve created list using mat-list. Then, we”ve added content using mat-list-item. Print Page Previous Next Advertisements ”;
Category: angular Material7
Angular Material 7 – Stepper
Angular Material 7 – Stepper ”; Previous Next The <mat-stepper>, an Angular Directive, is used to create a wizard like work-flow steps. In this chapter, we will showcase the configuration required to draw a stepper control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatStepperModule, MatInputModule, MatButtonModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatStepperModule, MatInputModule, MatButtonModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-horizontal-stepper [linear] = “isLinear” #stepper> <mat-step [stepControl] = “firstFormGroup”> <form [formGroup] = “firstFormGroup”> <ng-template matStepLabel>Enter your name</ng-template> <mat-form-field> <input matInput placeholder = “Last name, First name” formControlName = “firstCtrl” required> </mat-form-field> <div> <button mat-button matStepperNext>Next</button> </div> </form> </mat-step> <mat-step [stepControl] = “secondFormGroup”> <form [formGroup] = “secondFormGroup”> <ng-template matStepLabel>Enter your address</ng-template> <mat-form-field> <input matInput placeholder = “Address” formControlName = “secondCtrl” required> </mat-form-field> <div> <button mat-button matStepperPrevious>Back</button> <button mat-button matStepperNext>Next</button> </div> </form> </mat-step> <mat-step> <ng-template matStepLabel>Done</ng-template> Details taken. <div> <button mat-button matStepperPrevious>Back</button> <button mat-button (click) = “stepper.reset()”>Reset</button> </div> </mat-step> </mat-horizontal-stepper> Following is the content of the modified ts file app.component.ts. import { Component } from ”@angular/core”; import { FormControl } from “@angular/forms”; import { FormGroup } from “@angular/forms”; import { FormBuilder } from “@angular/forms”; import { Validators } from “@angular/forms”; export interface Food { value: string; display: string; } @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”materialApp”; firstFormGroup: FormGroup; secondFormGroup: FormGroup; constructor(private _formBuilder: FormBuilder) {} ngOnInit() { this.firstFormGroup = this._formBuilder.group({ firstCtrl: [””, Validators.required] }); this.secondFormGroup = this._formBuilder.group({ secondCtrl: [””, Validators.required] }); } } Result Verify the result. Details As first, we”ve created stepper using mat-stepper. Then, we”ve added content using mat-step. Print Page Previous Next Advertisements ”;
Angular Material 7 – Expansion Panel ”; Previous Next The <mat-expansion-panel>, an Angular Directive, is used to create an expandable detail v/s summary view. <mat-expansion-panel-header> − Represents the header section. Contains summary of panel and acts as control to expand or collapse the panel. <mat-panel-title> − Represents the panel title. <mat-panel-description> − Represents the panel summary. <mat-action-row> − Represents the actions panel at the bottom. In this chapter, we will showcase the configuration required to draw a expansion control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatExpansionModule, MatInputModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatExpansionModule, MatInputModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-expansion-panel> <mat-expansion-panel-header> <mat-panel-title> Personal data </mat-panel-title> <mat-panel-description> Type name and age </mat-panel-description> </mat-expansion-panel-header> <mat-form-field> <input matInput placeholder=”Name”> </mat-form-field> <mat-form-field> <input matInput placeholder=”Age”> </mat-form-field> </mat-expansion-panel> Result Verify the result. Details As first, we”ve created expansion panel using mat-expansion-panel. Then, we”ve added title, subtitle and content to it. Print Page Previous Next Advertisements ”;
Angular Material 7 – Card
Angular Material 7 – Card ”; Previous Next The <mat-card>, an Angular Directive, is used to create a card with material design styling and animation capabilities. It provides preset styles for the common card sections. <mat-card-title> − Represents the section for title. <mat-card-subtitle> − Represents the section for subtitle. <mat-card-content> − Represents the section for content. <mat-card-actions> − Represents the section for actions. <mat-card-footer> − Represents the section for footer. In this chapter, we will showcase the configuration required to draw a card control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatCardModule, MatButtonModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatCardModule, MatButtonModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified CSS file app.component.css. .tp-card { max-width: 400px; } .tp-header-image { background-image: url(”https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg”); background-size: cover; } Following is the content of the modified HTML host file app.component.html. <mat-card class = “tp-card”> <mat-card-header> <div mat-card-avatar class = “tp-header-image”></div> <mat-card-title>HTML5</mat-card-title> <mat-card-subtitle>HTML Basics</mat-card-subtitle> </mat-card-header> <img mat-card-image src = “https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg” alt = “Learn HTML5″> <mat-card-content> <p> HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web. </p> </mat-card-content> <mat-card-actions> <button mat-button>LIKE</button> <button mat-button>SHARE</button> </mat-card-actions> </mat-card> Result Verify the result. Details Here, we”ve created a card using mat-card. Print Page Previous Next Advertisements ”;
Angular Material 7 – Menu
Angular Material 7 – Menu ”; Previous Next The <mat-menu>, an Angular Directive, is used to create a menu and attach it with a control with material design styling and animation capabilities. In this chapter, we will showcase the configuration required to draw a menu control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatMenuModule, MatButtonModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatMenuModule, MatButtonModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <button mat-button [matMenuTriggerFor] = “menu”>File</button> <mat-menu #menu = “matMenu”> <button mat-menu-item>New</button> <button mat-menu-item>Open</button> <button mat-menu-item [matMenuTriggerFor] = “recent”>Recent</button> </mat-menu> <mat-menu #recent = “matMenu”> <button mat-menu-item>File 1</button> <button mat-menu-item>File 2</button> </mat-menu> Result Verify the result. Details As first, we”ve created two menus using mat-menu and bind them to buttons using matMenuTriggerFor. matMenuTriggerFor is passed the menu identifier to attach the menus. Print Page Previous Next Advertisements ”;
Angular Material 7 – SnackBar ”; Previous Next The <MatSnackBar>, an Angular Directive, is used to show a notification bar to show on mobile devices as an alternative of dialogs/popups. In this chapter, we will showcase the configuration required to show a snack bar using Angular Material. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatButtonModule,MatSnackBarModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatButtonModule,MatSnackBarModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <button mat-button (click)=”openSnackBar(”Party”, ”act”)”>Show snack-bar</button> Following is the content of the modified ts file app.component.ts. import {Component, Injectable} from ”@angular/core”; import { MatSnackBar } from “@angular/material”; @Component({ selector: ”app-root”, templateUrl: ”app.component.html”, styleUrls: [”app.component.css”] }) export class AppComponent { constructor(public snackBar: MatSnackBar) {} openSnackBar(message: string, action: string) { this.snackBar.open(message, action, { duration: 2000, }); } } Result Verify the result. Details Here, we”ve created a button using mat-button on whose click we shows the snack bar. Print Page Previous Next Advertisements ”;
Angular Material 7 – Tabs
Angular Material 7 – Tabs ”; Previous Next The <mat-tab-group>, an Angular Directive, is used to create a tabbed layout. In this chapter, we will showcase the configuration required to draw a tab control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatTabsModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatTabsModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-tab-group> <mat-tab label = “A”> Apple </mat-tab> <mat-tab label = “B”> Banana </mat-tab> <mat-tab label = “C”> Carrot </mat-tab> </mat-tab-group> Result Verify the result. Details As first, we”ve created tabs using mat-tab-group. Then, we”ve added content using mat-tab where each mat-tab represents a different tab. Print Page Previous Next Advertisements ”;
Angular Material 7 – Quick Guide ”; Previous Next Angular Material 7 – Overview Angular Material 7 is a UI component library for Angular developers. Angular Material”s reusable UI components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation. Following are a few salient features of Angular Material − In-built responsive designing. Standard CSS with minimal footprint. Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts. Includes enhanced and specialized features like cards, toolbar, speed dial, side nav, swipe, and so on. Cross-browser, and can be used to create reusable web components. Responsive Design Angular Material has in-built responsive designing so that the website created using Angular Material will redesign itself as per the device size. Angular Material classes are created in such a way that the website can fit any screen size. The websites created using Angular Material are fully compatible with PC, tablets, and mobile devices. Extensible Angular Material is by design very minimal and flat. It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules. It supports shadows and bold colors. The colors and shades remain uniform across various platforms and devices. And most important of all, Angular Material is absolutely free to use. Angular Material 7 – Environment Setup This tutorial will guide you on how to prepare a development environment to start your work with Angular Framework and Angular Material. In this chapter, we will discuss the Environment Setup required for Angular 6. To install Angular 6, we require the following − Nodejs Npm Angular CLI IDE for writing your code Nodejs has to be greater than 8.11 and npm has to be greater than 5.6. Nodejs To check if nodejs is installed on your system, type node -v in the terminal. This will help you see the version of nodejs currently installed on your system. C:>node -v v8.11.3 If it does not print anything, install nodejs on your system. To install nodejs, go the homepage https://nodejs.org/en/download/ of nodejs and install the package based on your OS. The homepage of nodejs will look like the following − Based on your OS, install the required package. Once nodejs is installed, npm will also get installed along with it. To check if npm is installed or not, type npm -v in the terminal. It should display the version of the npm. C:>npm -v 5.6.0 Angular 6 installations are very simple with the help of angular CLI. Visit the homepage https://cli.angular.io/ of angular to get the reference of the command. Type npm install -g @angular/cli, to install angular cli on your system. You will get the above installation in your terminal, once Angular CLI is installed. You can use any IDE of your choice, i.e., WebStorm, Atom, Visual Studio Code, etc. Install Angular Material Run the following command to install Angular Material module and its related components in the project created. materialApp>npm install –save @angular/material @angular/cdk @angular/animations hammerjs + @angular/animations@6.1.10 + @angular/cdk@7.0.3 + @angular/material@7.0.3 + hammerjs@2.0.8 added 4 packages and updated 1 package in 39.699s Add the following entry in app.module.ts file import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; imports: [ … FormsModule, ReactiveFormsModule, BrowserAnimationsModule ], Add the following entry in styles.css file to get a theme. @import “~@angular/material/prebuilt-themes/indigo-pink.css”; Add the following entry in index.htm file to get a material icons support. <link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”> Angular Material 7 – Auto-Complete The <mat-autocomplete>, an Angular Directive, is used as a special input control with an inbuilt dropdown to show all possible matches to a custom query. This control acts as a real-time suggestion box as soon as the user types in the input area. <mat-autocomplete> can be used to provide search results from local or remote data sources. In this chapter, we will showcase the configuration required to draw a autocomplete control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatAutocompleteModule,MatInputModule} from ”@angular/material”; import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatAutocompleteModule, MatInputModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <form class=”tp-form”> <mat-form-field class=”tp-full-width”> <input type=”text” placeholder=”US State” aria-label=”Number” matInput [formControl]=”myControl” [matAutocomplete]=”auto”> <mat-autocomplete #auto=”matAutocomplete”> <mat-option *ngFor=”let state of states” [value]=”state.value”> {{state.display}} </mat-option> </mat-autocomplete> </mat-form-field> </form> Following is the content of the modified CSS file app.component.css. .tp-form { min-width: 150px; max-width: 500px; width: 100%; } .tp-full-width { width: 100%; } Following is the content of the modified ts file app.component.ts. import { Component } from ”@angular/core”; import { FormControl } from “@angular/forms”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”materialApp”; myControl = new FormControl(); states; constructor(){ this.loadStates(); } //build list of states as map of key-value pairs loadStates() { var allStates = ”Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware, Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana, Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana, Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina, North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina, South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia, Wisconsin, Wyoming”; this.states = allStates.split(/, +/g).map( function (state) {
Angular Material 7 – DatePicker ”; Previous Next The <mat-datepicker>, an Angular Directive, is used to create a datepicker control using which date can be selected from a calendar or can be input directly using input box. In this chapter, we will showcase the configuration required to draw a datepicker control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatDatepickerModule, MatInputModule,MatNativeDateModule} from ”@angular/material”; import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatDatepickerModule, MatInputModule,MatNativeDateModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-form-field> <input matInput [matDatepicker] = “picker” placeholder = “Choose a date”> <mat-datepicker-toggle matSuffix [for] = “picker”></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> Result Verify the result. Details As first, we”ve created an input box and bind an datepicker named picker using [matDatepicker] attribute. Then, we”ve created an datepicker named picker using mat-datepicker tag. Print Page Previous Next Advertisements ”;
Environment Setup
Angular Material 7 – Environment Setup ”; Previous Next This tutorial will guide you on how to prepare a development environment to start your work with Angular Framework and Angular Material. In this chapter, we will discuss the Environment Setup required for Angular 6. To install Angular 6, we require the following − Nodejs Npm Angular CLI IDE for writing your code Nodejs has to be greater than 8.11 and npm has to be greater than 5.6. Nodejs To check if nodejs is installed on your system, type node -v in the terminal. This will help you see the version of nodejs currently installed on your system. C:>node -v v8.11.3 If it does not print anything, install nodejs on your system. To install nodejs, go the homepage https://nodejs.org/en/download/ of nodejs and install the package based on your OS. The homepage of nodejs will look like the following − Based on your OS, install the required package. Once nodejs is installed, npm will also get installed along with it. To check if npm is installed or not, type npm -v in the terminal. It should display the version of the npm. C:>npm -v 5.6.0 Angular 6 installations are very simple with the help of angular CLI. Visit the homepage https://cli.angular.io/ of angular to get the reference of the command. Type npm install -g @angular/cli, to install angular cli on your system. You will get the above installation in your terminal, once Angular CLI is installed. You can use any IDE of your choice, i.e., WebStorm, Atom, Visual Studio Code, etc. Install Angular Material Run the following command to install Angular Material module and its related components in the project created. materialApp>npm install –save @angular/material @angular/cdk @angular/animations hammerjs + @angular/animations@6.1.10 + @angular/cdk@7.0.3 + @angular/material@7.0.3 + hammerjs@2.0.8 added 4 packages and updated 1 package in 39.699s Add the following entry in app.module.ts file import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; imports: [ … FormsModule, ReactiveFormsModule, BrowserAnimationsModule ], Add the following entry in styles.css file to get a theme. @import “~@angular/material/prebuilt-themes/indigo-pink.css”; Add the following entry in index.htm file to get a material icons support. <link href = “https://fonts.googleapis.com/icon?family=Material+Icons” rel = “stylesheet”> Print Page Previous Next Advertisements ”;