Tyson Gill

Angular Module Loading

January 12, 2020January 12, 2020 by Tyson Gill

An effective loading strategy is key to a successful single-page application.
A module can be loaded eagerly, lazily and preloaded.
- Eager Loading – All modules and functions are loaded on application startup
- Lazy Loading – Modules are loaded on demand
- PreLoading – Loading Module in background just after application starts.

Reusable Material Data Table as a component

January 13, 2020January 8, 2020 by Tyson Gill

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

January 6, 2020January 6, 2020 by Tyson Gill

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 GridList

January 6, 2020January 6, 2020 by Tyson Gill

Angular Material List

January 6, 2020January 6, 2020 by Tyson Gill

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

January 5, 2020January 5, 2020 by Tyson Gill

By itself mat-menu does not render anything
It has to be triggered from UI element or programatically
Documentation : https://material.angular.io/components/menu/api

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

January 5, 2020January 5, 2020 by Tyson Gill

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

January 5, 2020January 5, 2020 by Tyson Gill

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

January 5, 2020January 5, 2020 by Tyson Gill

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

January 5, 2020January 5, 2020 by Tyson Gill

Badges are small status descriptors for UI elements.
Example : Displaying notification count for a user over an inbox icon or number of unread messages in a chat.
Documentation : https://material.angular.io/components/badge/overview

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 :