Cacher is the code snippet organizer for pro developers

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Lotto Results</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse" id="navbarsExample03">
    <ul class="navbar-nav mr-auto">
      <li [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}" class="nav-item active"> <!-- required -->
        <a [routerLink]="['/']" class="nav-link" href="#">Home <span class="sr-only">(current)</span></a><!-- required -->
      </li>  
    </ul>

    <ul class="navbar-nav navbar-right">
      <li [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}" class="nav-item"><a [routerLink]="['/login']" class="nav-link" href="#">Login</a></li><!-- required -->
      <li [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}" class="nav-item"><a [routerLink]="['/register']" class="nav-link" href="#">Register</a></li>      <!-- required -->
    </ul>
  </div>
</nav>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; //required

import { AppComponent } from './app.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import { LoginComponent } from './pages/login/login.component';
import { RegisterComponent } from './pages/register/register.component';
import { HomeComponent } from './pages/home/home.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { ProfileComponent } from './pages/profile/profile.component';

const appRoutes: Routes = [ //required
  {path:'', component:HomeComponent},
  {path:'register', component:RegisterComponent},
  {path:'login', component:LoginComponent},
  {path:'dashboard', component:DashboardComponent},
  {path:'profile', component:ProfileComponent},
]

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    LoginComponent,
    RegisterComponent,
    HomeComponent,
    DashboardComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes) //required
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. install angular cli
2. ng new app //creating new project
3. generating components like navbar, header and other pages.
4. ng g c navbar //generate component navbar

5. setup routes