Category: angular Material7

Angular Material 7 – Radio Button ”; Previous Next The <mat-radiobutton>, an Angular Directive, is used for <input type=”radio”> for enhance material design based styling.. In this chapter, we will showcase the configuration required to draw a radio button 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 {MatRadioModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatRadioModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified CSS file app.component.css. .tp-radio-group { display: inline-flex; flex-direction: column; } .tp-radio-button { margin: 5px; } .tp-selected-value { margin: 15px 0; } Following is the content of the modified ts file app.component.ts. import { Component } from ”@angular/core”; import { FormControl } from “@angular/forms”; import { Validators } from “@angular/forms”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”materialApp”; favoriteSeason: string; seasons: string[] = [”Winter”, ”Spring”, ”Summer”, ”Autumn”]; } Following is the content of the modified HTML host file app.component.html. <mat-radio-group class = “tp-radio-group” [(ngModel)] = “favoriteSeason”> <mat-radio-button class = “tp-radio-button” *ngFor = “let season of seasons” [value] = “season”> {{season}} </mat-radio-button> </mat-radio-group> <div class = “tp-selected-value”> Selected Season: {{favoriteSeason}} </div> Result Verify the result. Details As first, we”ve created an radio button group using mat-radio-group bound with ngModel. Then, we”ve added radio buttons using mat-radio-button. Print Page Previous Next Advertisements ”;

Angular Material 7 – Auto-Complete ”; Previous Next 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) { return { value: state.toUpperCase(), display: state }; }); } } Result Verify the result. Details As first, we”ve created an input box and bind an autocomplete named auto using [matAutocomplete] attribute. Then, we”ve created an autocomplete named auto using mat-autocomplete tag. As next, using *ng For loop, options are created. Print Page Previous Next Advertisements ”;

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 ”;

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/[email protected] + @angular/[email protected] + @angular/[email protected] + [email protected] 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 ”;