Angular Material — Badges, Bottom Sheets, and Buttons

Photo by Siora Photography on Unsplash

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.

Badges

We can add badges into our app with Angular Material.

To add it, we 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 { MatBadgeModule } from '@angular/material/badge';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatBadgeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div>
  <span matBadge="4" matBadgeOverlap="false">Text with a badge</span>
</div>

We add the matBadge and matBadgeOverlap properties to add a badge.

Also, we can make it raised: