Reusable Material Data Table as a component

A new component is created with the name of table

ng g c table

table.component.ts

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @Input() displayedColumns: string[];
  @Input() columnHeader: string[];
  @Input() dataSource;
  @Input() itemsPerPage: number;
  @Input() columnWidth: number[];
  pageSizeOptions: [number];
  public customeCss = [];
  constructor() { }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.pageSizeOptions = [this.itemsPerPage];
    this.calculateCustomeCss();
  }
  calculateCustomeCss(){
    for (const width of this.columnWidth) {
      this.customeCss.push({
        flex: '0 0 ' + width + 'px'
      });
    }
  }
}

table.component.html


<mat-grid-list cols="3" rowHeight="9:1" style="background:rgb(192, 143, 143); border: solid 2px #000;">
  <mat-grid-tile style="background-color: royalblue;">Logo</mat-grid-tile>
  <mat-grid-tile colspan="2"></mat-grid-tile>
  <mat-grid-tile colspan="3">
    <div class="mat-display-1" style="margin-bottom: 0px;"><u>Periodic Table</u></div>
  </mat-grid-tile>
  <mat-grid-tile colspan="3" rowspan="2">
    <div class="mat-body-1">
    Detail 1 : Text1<br/>
    Detail 1 : Text1<br/>
    Detail 1 : Text1<br/>
  </div>
  </mat-grid-tile>
</mat-grid-list>
<mat-card>
  <mat-card-content>
  <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col">
      <mat-header-cell
        *matHeaderCellDef
        mat-sort-header [innerHTML]="columnHeader[i]"
        [ngStyle]="customeCss[i]"
        ></mat-header-cell>
      <mat-cell *matCellDef="let element"
        [ngStyle]="customeCss[i]"
       > {{ element[col] }} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</mat-card-content>
  <mat-card-footer>
    <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
  </mat-card-footer>
</mat-card>

table.component.css

table {
  width: 100%;
}

app.component.ts

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  columnHeader: string[] = ['No', 'Name', 'Weight', 'Symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  itemsPerPage = 5;
  columnWidth = [80, 180, 180, 100];
}

app.component.html

<app-table
  [displayedColumns]="displayedColumns"
  [columnHeader]="columnHeader"
  [columnWidth]="columnWidth"
  [dataSource]="dataSource"
  [itemsPerPage]="itemsPerPage">
</app-table>

material.module.ts (A new module is created for material)

import { NgModule } from '@angular/core';
import { MatButtonModule,
  MatDividerModule,
  MatGridListModule,
  MatFormFieldModule,
  MatInputModule,
  MatTableModule,
  MatCardModule
  } from '@angular/material';
import { MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';
import { MatToolbarModule} from '@angular/material/toolbar';
import { MatSidenavModule} from '@angular/material/sidenav';
import { MatMenuModule} from '@angular/material/menu';
import { MatListModule } from '@angular/material/list';
import { MatPaginatorModule } from '@angular/material/paginator';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatToolbarModule,
  MatSidenavModule,
  MatMenuModule,
  MatListModule,
  MatDividerModule,
  MatGridListModule,
  MatFormFieldModule,
  MatInputModule,
  MatTableModule,
  MatPaginatorModule,
  MatCardModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

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 { MaterialModule } from './material/material.module';
import { FormsModule } from '@angular/forms';
import { TableComponent } from './table/table.component';


@NgModule({
  declarations: [
    AppComponent,
    TableComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]

Output :

Angular Material Input – A form component

material.module.ts

import { NgModule } from '@angular/core';
import { MatButtonModule, MatDividerModule, MatGridListModule, MatFormFieldModule, MatInputModule } from '@angular/material';
import { MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';
import { MatToolbarModule} from '@angular/material/toolbar';
import { MatSidenavModule} from '@angular/material/sidenav';
import { MatMenuModule} from '@angular/material/menu';
import { MatListModule } from '@angular/material/list';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatToolbarModule,
  MatSidenavModule,
  MatMenuModule,
  MatListModule,
  MatDividerModule,
  MatGridListModule,
  MatFormFieldModule,
  MatInputModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

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 { MaterialModule } from './material/material.module';
import { FormsModule } from '@angular/forms';


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

app.component.html

<div>
  <mat-form-field>
    <input matInput>
  </mat-form-field>
</div>
<div>
  <mat-form-field> <!-- flatLabel="auto" which is default -->
    <mat-label>Name</mat-label>
    <input matInput>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="never">
    <mat-label>Name</mat-label>
    <input matInput>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always">
    <mat-label>Name</mat-label>
    <input matInput>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always">
    <mat-label>Name</mat-label>
    <input matInput required>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker>
    <mat-label>Name</mat-label>
    <input matInput required>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker color="accent">
    <mat-label>Name</mat-label>
    <input matInput required>
    <mat-hint>Min 5 characters</mat-hint>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker color="warn"> <!-- apperance is legacy here -->
    <mat-label>Name</mat-label>
    <input matInput required>
    <mat-hint align="end">Min 5 characters</mat-hint>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker apperance="standard">
    <mat-label>Name</mat-label>
    <input matInput required>
    <mat-hint align="end">Min 5 characters</mat-hint>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker apperance="fill">
    <mat-label>Name</mat-label>
    <input matInput required>
    <mat-hint align="end">Min 5 characters</mat-hint>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker apperance="outline">
    <mat-label>Name</mat-label>
    <input matInput required>
    <mat-hint align="end">Min 5 characters</mat-hint>
  </mat-form-field>
</div>

Output :

Angular Material List

  • Usually used to display list in sidenav

material.module.ts (a new module added)

import { NgModule } from '@angular/core';
import { MatButtonModule, MatDividerModule } from '@angular/material';
import { MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';
import { MatToolbarModule} from '@angular/material/toolbar';
import { MatSidenavModule} from '@angular/material/sidenav';
import { MatMenuModule} from '@angular/material/menu';
import { MatListModule } from '@angular/material/list';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatToolbarModule,
  MatSidenavModule,
  MatMenuModule,
  MatListModule,
  MatDividerModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

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 { MaterialModule } from './material/material.module';
import { FormsModule } from '@angular/forms';


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

app.component.html

<mat-list>
  <mat-list-item>
    <mat-icon mat-list-icon>home</mat-icon>
    <h3 matLine>Heading</h3>
    <p matLine>Line</p>
  </mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item>
    <mat-icon mat-list-icon>folder</mat-icon>
    <h3 matLine>Heading2</h3>
    <p matLine>Line2</p>
  </mat-list-item>
</mat-list>
<hr>
<mat-list>
  <mat-list-item>Item 1</mat-list-item>
  <mat-list-item>Item 2</mat-list-item>
  <mat-list-item>Item 3</mat-list-item>
</mat-list>
<mat-list dense>
  <mat-list-item>Item 1</mat-list-item>
  <mat-list-item>Item 2</mat-list-item>
  <mat-list-item>Item 3</mat-list-item>
</mat-list>
<mat-nav-list>
  <a mat-list-item href="#">Home</a>
  <a mat-list-item href="#">About</a>
  <a mat-list-item href="#">Services</a>
</mat-nav-list>

Output :

Angular Material Menu

material.module.ts (add a new module)

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
import { MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';
import { MatToolbarModule} from '@angular/material/toolbar';
import { MatSidenavModule} from '@angular/material/sidenav';
import { MatMenuModule} from '@angular/material/menu';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatToolbarModule,
  MatSidenavModule,
  MatMenuModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

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 { MaterialModule } from './material/material.module';
import { FormsModule } from '@angular/forms';


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

app.component.html

<mat-menu #appMenu="matMenu" xPosition="after" yPosition="above">
  <button mat-menu-item [matMenuTriggerFor]="subMenu">FrontEnd</button>
  <button mat-menu-item>BackEnd</button>
</mat-menu>
<button class="center" mat-flat-button [matMenuTriggerFor]="appMenu">Menu</button>

<mat-menu #subMenu="matMenu">
  <button mat-menu-item>Angular</button>
  <button mat-menu-item>React</button>
  <button mat-menu-item>Vue</button>
</mat-menu>

<mat-menu #lazyMenu="matMenu">
  <ng-template matMenuContent let-name="name" let-hobby="hobby">
    <button mat-menu-item>Setting</button>
    <button mat-menu-item>Hobby is {{hobby}}</button>
    <button mat-menu-item>Logout {{name}}</button>
  </ng-template>
</mat-menu>

<button
  [matMenuTriggerFor]="lazyMenu"
  [matMenuTriggerData]="{name : 'Tyson', hobby: 'Gaming'}"
  mat-raised-button> Tyson</button>
<button
  [matMenuTriggerFor]="lazyMenu"
  [matMenuTriggerData]="{name : 'Heapwizard', hobby: 'Blogging'}"
  mat-raised-button>HeapWizard</button>

app.component.css

.center{
  margin: 10rem;
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  opened = false;
  title = 'GettingStarted';
  log(state){
    console.log(state);
  }
}

Output :

Angular Material SideNavbar

Note : By default SideNavbar is hidden

material.module.ts

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
import { MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';
import { MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatToolbarModule,
  MatSidenavModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

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 { MaterialModule } from './material/material.module';
import { FormsModule } from '@angular/forms';


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

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  opened = false;
  title = 'GettingStarted';
  log(state){
    console.log(state);
  }
}

app.component.html

<mat-sidenav-container>
  <!-- default is mode over -->
  <!-- mode push pushes over the content with an overlay-->
  <!-- mode side pushes over the content without an overlay and does not auto closes -->
  <mat-sidenav #sidenav (opened)="log('Opened')" (closed)="log('closed')" mode="side" [(opened)]="opened">Sidenav</mat-sidenav>
  <mat-sidenav-content>Main
    <button (click)="opened=!opened">Toggle Opened</button>
    <button (click)="sidenav.open()">Open</button>
    <button (click)="sidenav.close()">Close</button>
    <button (click)="sidenav.toggle()">Toggle</button>
  </mat-sidenav-content>
</mat-sidenav-container>

app.component.css

mat-sidenav-container{
  height: 100%;
}
mat-sidenav, mat-sidenav-content{
  padding: 16px;
}
mat-sidenav{
  background: lightcoral;
  width: 200px;
}

Output:

Angular Navbar

  • Tool bar displays information and actions related to the current screen.
  • It is used for branding screen titles, navigation and actions.
  • In the below example we will see how we can use tool bar as a nav bar.

material.module.ts

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
import { MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';
import { MatToolbarModule} from '@angular/material/toolbar';



const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatToolbarModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

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 { MaterialModule } from './material/material.module';


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

app.component.html

<mat-toolbar color="primary" class="navbar">
  <div>HeapWizard.com</div>
  <div>
    <span>Home</span>
    <span>About</span>
    <span>Services</span>
  </div>
</mat-toolbar>

app.component.css

.navbar{
  justify-content: space-between;
}
span{
  padding-right: 1rem;
}

Angular Material Spinner

material.module.ts (added a new module)

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
import { MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule,
  MatBadgeModule,
  MatProgressSpinnerModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

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 { MaterialModule } from './material/material.module';


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

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'GettingStarted';
  showSpinner = false;

  loadData(){
    this.showSpinner = true;
    setTimeout(()=> { this.showSpinner = false},5000);
  }
}

app.component.html

<div>
  <mat-spinner *ngIf="showSpinner"></mat-spinner>
</div>
<div><button mat-raised-button (click)="loadData()">Load Data</button></div>

<!-- value is the % of the progress bar shown -->
<mat-progress-spinner value="40"></mat-progress-spinner>
<mat-progress-spinner value="0"></mat-progress-spinner>
<mat-progress-spinner value="100"></mat-progress-spinner>
<div>
  <mat-spinner color="primary"></mat-spinner>
  <mat-spinner color="accent"></mat-spinner>
  <mat-spinner color="warn"></mat-spinner>
</div>

Output :

Angular Material Badges

material.module.ts (a new module created)

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule,
  MatBadgeModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

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 { MaterialModule } from './material/material.module';


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

app.component.html

<div style="padding-top: 15px;">
  <span matBadge="5">Notifications</span>
</div>
<div><span matBadge="5" matBadgePosition="below before">Notification</span></div>
<div><span matBadge="5" matBadgePosition="below after">Notification</span></div>
<div><span matBadge="5" matBadgePosition="above before">Notification</span></div>

<div><span matBadge="5" matBadgeSize="small">Notification</span></div>
<div><span matBadge="5" matBadgeSize="medium">Notification</span></div>
<div><span matBadge="5" matBadgeSize="large">Notification</span></div>

<div><span matBadge="5" matBadgeColor="primary">Notification</span></div>
<div><span matBadge="5" matBadgeColor="accent">Notification</span></div>
<div><span matBadge="5" matBadgeColor="warn">Notification</span></div>


<div><span matBadge="5" matBadgeOverlap="false">Notification</span></div>

<div><span [matBadge]="notifications">Notification</span></div>

<div><span [matBadge]="notifications2" [matBadgeHidden]="notifications2===0" >Notification</span></div>

app.component.css

div{
  margin: 1rem;
}

Output :