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);
The Result looks like - https://stackblitz.com/edit/angular-jvcvai-yimrrv
|
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..
|