Category: angular Material7

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

Angular Material 7 Tutorial Quick Guide Resources Job Search Discussion Angular Material 7 is a UI component library for Angular developers. Angular Material 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. It helps in creating faster, beautiful, and responsive websites. It is inspired by the Google Material Design. Audience This tutorial is meant for professionals who aspire to learn the basics of Angular Material and how to use it to create faster, beautiful, and responsive websites. This tutorial explains the fundamental concepts of Angular Material. Prerequisites Before proceeding with this tutorial, you should have a basic understanding of TypeScript/JavaScript, text editor, and execution of programs, etc. Because we are going to develop web-based applications using Angular, it will be good if you have an understanding of other web technologies such as HTML, CSS, and AJAX. Print Page Previous Next Advertisements ”;

Angular Material 7 – Slider ”; Previous Next The <mat-slider>, an Angular Directive, is used as a enhanced range selector with material design styling and animation capabilities. In this chapter, we will showcase the configuration required to draw a slider 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 {MatSliderModule, MatCheckboxModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatSliderModule, MatCheckboxModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-slider class = “tp-margin” [disabled] = “disabled” [invert] = “invert” [thumbLabel] = “thumbLabel” [(ngModel)] = “value” [vertical] = “vertical”> </mat-slider> <section class = “tp-section”> <mat-checkbox class = “tp-margin” [(ngModel)] = “thumbLabel”>Show thumb label</mat-checkbox> </section> <section class = “tp-section”> <mat-checkbox class = “tp-margin” [(ngModel)] = “vertical”>Vertical</mat-checkbox> <mat-checkbox class = “tp-margin” [(ngModel)] = “invert”>Inverted</mat-checkbox> </section> <section class = “tp-section”> <mat-checkbox class = “tp-margin” [(ngModel)] = “disabled”>Disabled</mat-checkbox> </section> Following is the content of the modified CSS file app.component.css. .tp-section { display: flex; align-content: center; align-items: center; height: 60px; } .tp-margin { margin: 30px; } .mat-slider-horizontal { width: 300px; } .mat-slider-vertical { height: 300px; } Following is the content of the modified ts file app.component.ts. import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”materialApp”; disabled = false; invert = false; thumbLabel = false; value = 0; vertical = false; } Result Verify the result. Details As first, we”ve created four check boxes using mat-checkbox and bind them using ngModel with variables. These properties will be used to customize the slider. Then, we”ve created the slider and showcased its various attributes bound with variables in .ts file. Print Page Previous Next Advertisements ”;

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