Angular Material Progress Bar

Angular Material Progress Bar - Horizontal progress-bar

The <mat-progress-bar> is a horizontal progress-bar for indicating progress and activity.

The progress-bar supports four modes -
1.      Determinate - These operations perform where the percentage of the operation complete.
2.      Indeterminate - These operations perform where the user is asked to wait while something.
3.      Buffer - These operations perform where the user wants to indicate some activity or loading from the server.
4.      Query - These operations perform where the user wants to indicate pre-loading

For the Accessibility - Each progress bar should be given a meaningful label –
1.      aria-label or
2.      aria-labelledby

The example for Progress-bar as following –
progress-bar.html
<mat-progress-bar mode="indeterminate"></mat-progress-bar>


progress-bar.ts
import {Component} from '@angular/core';
/**
 * Indeterminate progress-bar
 */
@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.html',
  styleUrls: ['progress-bar.css'],
})
export class ProgressBar {}


app.module.ts
import {NgModule} from '@angular/core';
import {CdkTableModule} from '@angular/cdk/table';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ProgressBar} from './app/progress-bar';

import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
} from '@angular/material';

@NgModule({
  exports: [
    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
  ]
})
export class DemoMaterialModule {}

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [ProgressBar],
  declarations: [ProgressBar],
  bootstrap: [ProgressBar],
  providers: []
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular Material Progress Bar - Horizontal progress-bar Angular Material Progress Bar - Horizontal progress-bar Reviewed by Anil Singh on 3:26 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^