Add red dot in a tab in navbar

I need to add a red dot with a number in a messaging tab when there are new messages.

This is my HTML

<ul class="nav pw-nav pw-nav--horizontal">
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/home']">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/documents']">My Applications</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/registry']">Registered entities</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/conversation']">Communication</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/external-services']">External Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/contact-us']">Contact us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/user-manuals']">User Manuals</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled">Post-Registration</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled">How to</a>
    </li>
    <!--<li class="nav-item">-->
      <!--<a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/post-registration']">Post-Registration</a>-->
    <!--</li>-->
    <!--<li class="nav-item">-->
      <!--<a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/how-to']">How to</a>-->
    <!--</li>-->
  </ul>

this is my TS

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {DashboardComponent} from './dashboard.component';
import {HomeComponent} from './home/home.component';
import {DocumentsComponent} from './documents/documents.component';
import {RegistryComponent} from './registry/registry.component';
import {ExternalServicesComponent} from './external-services/external-services.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import {HowToComponent} from './how-to/how-to.component';
import {PostRegComponent} from './post-registration/post-reg.component';
import {UserManualsComponent} from './user-mannuals/user-manuals.component';

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'documents' },
      { path: 'home', component: HomeComponent },
      { path: 'documents', component: DocumentsComponent },
      { path: 'registry', component: RegistryComponent },
      { path: 'external-services', component: ExternalServicesComponent },
      { path: 'contact-us', component: ContactUsComponent },
      { path: 'user-manuals', component: UserManualsComponent },
      { path: 'post-registration', component: PostRegComponent },
      { path: 'how-to', component: HowToComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class DashboardRoutingModule {}

I just an internship in a company and have never faced JS , Angular 6 before. What I found in google is, I need to import badge.module and then in HTML add it. However, I am not sure where to look for a file for importing the badge module.