Angular Material — Paginator and, Progress Bar, and Progress Spinner

Angular Material is a popular UI framework based on Material Design for Angular.

In this article, we’ll look at how to use Angular Material into our Angular project.

Paginator

The paginator component lets us add a form control to control the pagination settings.

For example, we can write:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatPaginatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div>
  <mat-paginator [length]="100" [pageSize]="10"
    [pageSizeOptions]="[5, 10, 25, 100]">
  </mat-paginator>
</div>

We add the mat-paginator component to add a pagination control.

length is the total number of entries.

pageSize is the size of the page.

pageSizeOptions is an array of page sizes we can set.

Progress Bar

We can add a progress bar with the mat-progress-bar component.

For example, we can write:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatProgressBarModule } from '@angular/material/progress-bar';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatProgressBarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div>
  <mat-progress-bar mode="buffer"></mat-progress-bar>
</div>

We add the MatProgressBarModule to add a progress bar.

The mat-progress-bar adds the progress bar.

The mode attribute sets the appearance of the progress bar.

We can also make it determinate:

<div>
  <mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
</div>

or indeterminate:

<div>
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>

Progress Spinner

The mat-progress-spinner lets us add a progress spinner to our app.

For example, we can write:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { ThemePalette } from '@angular/_material_/core';
import { ProgressSpinnerMode } from '@angular/material/progress-spinner';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  color: ThemePalette = 'primary';
  mode: ProgressSpinnerMode = 'indeterminate';
  value = 50;
}

app.component.html

<div>
  <mat-progress-spinner class="example-margin" [color]="color" [mode]="mode"
    [value]="value">
  </mat-progress-spinner>
</div>

We add the MatProgressSpinnerModule to let us add the progress spinner.

Then in app.component.ts , we add the color , mode and value variables to set the color, spinner mode, and the progress value respectively.

In the template, we add the mat-progress-spinner component to set those variables to the attributes.

The value is used when the progress spinner has mode set to 'determinate' .

Conclusion

We can add the paginator, progress bar, and progress spinner with Angular Material.