Category: angular Material7

Angular Material 7 – Progress Spinner ”; Previous Next The <mat-progress-spinner>, an Angular Directive, is used to show a progress spinner with material styling. In this chapter, we will showcase the configuration required to draw a deterministic as well as indeterministic progress spinner 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 {MatProgressSpinnerModule, MatRadioModule, MatSliderModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatProgressSpinnerModule, MatRadioModule, MatSliderModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified ts file app.component.css. .tp-section { display: flex; align-content: center; align-items: center; height: 60px; } .tp-margin { margin: 0 10px; } Following is the content of the modified HTML host file app.component.html. <section class = “tp-section”> <label class = “tp-margin”>Color:</label> <mat-radio-group [(ngModel)] = “color”> <mat-radio-button class = “tp-margin” value = “primary”> Primary </mat-radio-button> <mat-radio-button class = “tp-margin” value = “accent”> Accent </mat-radio-button> <mat-radio-button class = “tp-margin” value = “warn”> Warn </mat-radio-button> </mat-radio-group> </section> <section class = “tp-section”> <label class = “tp-margin”>Mode:</label> <mat-radio-group [(ngModel)] = “mode”> <mat-radio-button class = “tp-margin” value = “determinate”> Determinate </mat-radio-button> <mat-radio-button class = “tp-margin” value = “indeterminate”> Indeterminate </mat-radio-button> </mat-radio-group> </section> <section class = “tp-section” *ngIf = “mode === ”determinate””> <label class = “tp-margin”>Progress:</label> <mat-slider class = “tp-margin” [(ngModel)] = “value”></mat-slider> </section> <section class = “tp-section”> <label class = “tp-margin”>Mode: {{mode}}</label> <mat-progress-spinner class = “tp-margin” [color] = “color” [mode] = “mode” [value] = “value”> </mat-progress-spinner> </section> 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”; color = ”primary”; mode = ”determinate”; value = 50; } Result Verify the result. Details Here, we”ve created progress spinner using mat-progress-spinner. Print Page Previous Next Advertisements ”;

Angular Material 7 – Badge ”; Previous Next The <mat-badge>, an Angular Directive, is used to create a badges which is a small status descriptor for UI elements. A badge typically carries a number or other short set of characters, that appears in proximity to another UI element. In this chapter, we will showcase the configuration required to draw a badge 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 {MatBadgeModule, MatButtonModule, MatIconModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatBadgeModule, MatButtonModule, MatIconModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <p><span matBadge = “4” matBadgeOverlap = “false”>Mail</span></p> <p> <button mat-raised-button color = “primary” matBadge = “8” matBadgePosition = “before” matBadgeColor = “accent”> Action </button> </p> <p><mat-icon matBadge = “15” matBadgeColor = “warn”>home</mat-icon></p> Result Verify the result. Details As first, we”ve created a span, a button and a icon. Then, we”ve added badges to each element using mat-badge attribute. Print Page Previous Next Advertisements ”;

Angular Material 7 – Paginator ”; Previous Next The <mat-paginator>, an Angular Directive, is used to show a navigator with paged information. In this chapter, we will showcase the configuration required to show a paginator 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 {MatPaginatorModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatPaginatorModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-paginator [length] = “100” [pageSize] = “10” [pageSizeOptions] = “[5, 10, 25, 100]” (page) = “pageEvent = $event”> </mat-paginator> <div *ngIf = “pageEvent”> <h5>Page Change Event</h5> <div>List length: {{pageEvent.length}}</div> <div>Page size: {{pageEvent.pageSize}}</div> <div>Page index: {{pageEvent.pageIndex}}</div> </div> Result Verify the result. Details Here, we”ve created a paginator using mat-paginator and handles its change event. Print Page Previous Next Advertisements ”;

Angular Material 7 – Progress Bar ”; Previous Next The <mat-progress-bar>, an Angular Directive, is used to show a progress bar with material styling. In this chapter, we will showcase the configuration required to draw a deterministic as well as indeterministic progress bar 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 {MatProgressBarModule, MatRadioModule, MatSliderModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatProgressBarModule, MatRadioModule, MatSliderModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified ts file app.component.css. .tp-section { display: flex; align-content: center; align-items: center; height: 60px; } .tp-margin { margin: 0 10px; } Following is the content of the modified HTML host file app.component.html. <section class = “tp-section”> <label class = “tp-margin”>Color:</label> <mat-radio-group [(ngModel)] = “color”> <mat-radio-button class = “tp-margin” value = “primary”> Primary </mat-radio-button> <mat-radio-button class = “tp-margin” value = “accent”> Accent </mat-radio-button> <mat-radio-button class = “tp-margin” value = “warn”> Warn </mat-radio-button> </mat-radio-group> </section> <section class = “tp-section”> <label class = “tp-margin”>Mode:</label> <mat-radio-group [(ngModel)] = “mode”> <mat-radio-button class = “tp-margin” value = “determinate”> Determinate </mat-radio-button> <mat-radio-button class = “tp-margin” value = “indeterminate”> Indeterminate </mat-radio-button> <mat-radio-button class = “tp-margin” value = “buffer”> Buffer </mat-radio-button> <mat-radio-button class = “tp-margin” value = “query”> Query </mat-radio-button> </mat-radio-group> </section> <section class = “tp-section” *ngIf = “mode === ”determinate” || mode === ”buffer””> <label class = “tp-margin”>Progress:</label> <mat-slider class = “tp-margin” [(ngModel)] = “value”></mat-slider> </section> <section class = “tp-section” *ngIf = “mode === ”buffer””> <label class = “tp-margin”>Buffer:</label> <mat-slider class = “tp-margin” [(ngModel)] = “bufferValue”></mat-slider> </section> <section class = “tp-section”> <label class = “tp-margin”>Mode: {{mode}}</label> <mat-progress-bar class = “tp-margin” [color] = “color” [mode] = “mode” [value] = “value” [bufferValue] = “bufferValue” > </mat-progress-bar> </section> 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”; color = ”primary”; mode = ”determinate”; value = 50; bufferValue = 75; } Result Verify the result. Details Here, we”ve created progress bar using mat-progress-bar. Print Page Previous Next Advertisements ”;

Angular Material 7 – Form Field ”; Previous Next The <mat-form-field>, an Angular Directive, is used to create a wrapper over angular components and is used to apply text styles like underline, bold, hints etc. Following angular component can be used within <mat-form-field>. <input matNativeControl> <textarea matNativeControl> <select matNativeControl> <mat-select> <mat-chip-list> In this chapter, we will showcase the configuration required to use a mat-form-field control in 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 {MatInputModule,MatOptionModule, MatSelectModule, MatIconModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatInputModule,MatOptionModule, MatSelectModule, MatIconModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified CSS file app.component.css. .tp-container { display: flex; flex-direction: column; } .tp-container > * { width: 100%; } Following is the content of the modified HTML host file app.component.html. <div class = “tp-container”> <mat-form-field appearance = “standard”> <input matInput placeholder = “Input”> <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> <mat-hint>Sample Hint</mat-hint> </mat-form-field> <mat-form-field appearance = “fill”> <textarea matInput placeholder = “Textarea”></textarea> </mat-form-field> <mat-form-field appearance = “outline”> <mat-select placeholder = “Select”> <mat-option value = “A”>A</mat-option> <mat-option value = “B”>B</mat-option> <mat-option value = “C”>C</mat-option> </mat-select> </mat-form-field> </div> Result Verify the result. Details As first, we”ve created an form field using mat-form-field wrapper. We”ve changed the appearance of form field using appearance attribute. Then, a form control is added to the form field. Print Page Previous Next Advertisements ”;

Discuss Angular Material 7 ”; Previous Next 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. Print Page Previous Next Advertisements ”;

Angular Material 7 – Useful Resources ”; Previous Next The following resources contain additional information on Angular Material. Please use them to get more in-depth knowledge on this. Useful Video Courses E-commerce Web with Angular 8 (Material) and Firebase Featured 61 Lectures 5 hours University Code More Detail Angular – The Complete Course 14 Lectures 48 mins Ganesh Kavhar More Detail Master Spring & Angular Material with a full web application Best Seller 28 Lectures 2.5 hours Ali Bouali More Detail Android Material UI Design Masterclass with Adobe Xd 36 Lectures 6.5 hours Stevdza-San More Detail Learn Web Development with HTML, CSS , Javascript ,Typescript, and Angular 30 Lectures 58 mins James Coonce More Detail SAP MM (Materials Management) Training Best Seller 43 Lectures 33.5 hours Uplatz More Detail Print Page Previous Next Advertisements ”;

Angular Material 7 – Toolbar ”; Previous Next The <mat-toolbar>, an Angular Directive, is used to create a toolbar to show title, header or any action button. <mat-toolbar> – Represents the main container. <mat-toolbar-row> – Add a new row. In this chapter, we will showcase the configuration required to draw a toolbar 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 {MatToolbarModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatToolbarModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified CSS file app.component.css. .filler { flex: 1 1 auto; } .gap { margin-right: 10px; } Following is the content of the modified HTML host file app.component.html. <mat-toolbar color = “primary”> <span class = “gap”>File</span> <span>Edit</span> <span class = “filler”></span> <span>About</span> </mat-toolbar> Result Verify the result. Details As first, we”ve created a toolbar spanning the complete page. Then labels are added. Print Page Previous Next Advertisements ”;

Angular Material 7 – Input ”; Previous Next The <mat-input>, an Angular Directive, is used for <input> and <textarea> elements to work under <mat-form-field>. Following input types can be used within <mat-input>. color date datetime-local email month number password search tel text time url week In this chapter, we will showcase the configuration required to use a mat-input control in 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 {MatInputModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatInputModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 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”; import {Validators} from ”@angular/forms”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”materialApp”; emailFormControl = new FormControl(””, [ Validators.required, Validators.email, ]); } 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 matInput placeholder = “Favorite Food” value = “Pasta”> </mat-form-field> <mat-form-field class = “tp-full-width”> <textarea matInput placeholder = “Enter your comment”></textarea> </mat-form-field> <mat-form-field class = “tp-full-width”> <input matInput placeholder = “Email” [formControl] = “emailFormControl”> <mat-error *ngIf = “emailFormControl.hasError(”email”) && !emailFormControl.hasError(”required”)”> Please enter a valid email address </mat-error> <mat-error *ngIf = “emailFormControl.hasError(”required”)”> Email is <strong>required</strong> </mat-error> </mat-form-field> </form> Result Verify the result. Details As first, we”ve created an form field using mat-form-field wrapper. Then, a form control is added to the form field using input and matInput attribute. Print Page Previous Next Advertisements ”;

Angular Material 7 – Chips ”; Previous Next The <mat-chip-list>, an Angular Directive, is used to a list of values as chips. In this chapter, we will showcase the configuration required to draw a chip 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 {MatChipsModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatChipsModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-chip-list> <mat-chip>One</mat-chip> <mat-chip>Two</mat-chip> <mat-chip color = “primary” selected>Tree</mat-chip> <mat-chip color = “accent” selected>Four</mat-chip> </mat-chip-list> Result Verify the result. Details As first, we”ve created chip list using mat-chip-list. Then, we”ve added chips to each chip list using mat-chip. Print Page Previous Next Advertisements ”;