Angular 4 -Header Nav Bar Disappears

Question

I have a navigation bar on the top of the page with some Routing Links in it. On Home page the Header navigation bar can be seen. But as soon as I Route to another Links the header navigation bar disappears.

How can i fix this?

• Please find the code below for navigation bar. It includes three routing links. When i click on Home header bar is seen.But when i click on other links it disappears.

Nav-bar.component.html-

<div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav" routerLinkActive="active">
    <li class="nav-item active">
      <a class="nav-link" [routerLink]="['/home']" matTooltip="Homepage!">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/table']" matTooltip="Information">Link1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/userinfo']" matTooltip="Userform">Link 2</a>
    </li>
    <li class="nav-item">
      <mat-form-field>
        <mat-select [(value)]="selected" >
          <mat-option value="option1" (click)="openSnackBar()">Option 1</mat-option>
          <mat-option value="option2" (click)="openSnackBar()">Option 2</mat-option>
          <mat-option value="option3" (click)="openSnackBar()">Option 3</mat-option>
        </mat-select>
      </mat-form-field>
    </li>
  </ul>
</nav>
</div>

This is the Homepage where i have called the Nav-Bar

<app-nav-bar></app-nav-bar>

        <div class="col-md-12">
          <h1>Welcome to Clara</h1>
          <p class="alignp">Hello! {{name}}</p>
        </div>

1. On the "table" Link in navbar.component.html the below code comes but then here the nav bar disappears

.

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>
  <mat-table #table [dataSource]="dataSource" matSort>

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef mat-sort-header> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]">

  </mat-paginator>
</div>

Then below is app.routes.ts

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';
import {UserComponent} from "./user-component/user-component.component";
import {HomePageComponent} from "./home-page/home-page.component";
import {AppComponent} from "./app.component";
import {UserFormComponent} from "./user-form/user-form.component";
import {InfoPageComponent} from "./info-page/info-page.component";
import {AppTabsComponent} from "./app-tabs/app-tabs.component";
import { StepperComponent } from './stepper/stepper.component';
import {TableComponent} from "./table/table.component";

const appRoutes: Routes = [
  { path: '', redirectTo: 'app', pathMatch: 'full' },
  { path: 'main',component: AppComponent},
  { path: 'user', component: UserComponent },
  { path:'home', component: HomePageComponent},
  { path:'table', component: TableComponent},
  { path:'userinfo', component: StepperComponent},
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

Answer 1

My guess was right...!! There is a catch.

In your HomeComponent you call NavBar + Some HTML content, which is perfectly fine. Now, understand the routing first, as soon as you load any component, it's constructor method gets called and component gets created, means the component is created and it will be shown in <router-outlet>, but when you route to other component, Angular destroys the previous component, and creates a new component that's being called and displays it again in the <router-outlet>.

So your code is correct, but the place you are putting your Navbar is incorrect.

To get Navbar on every page in your app, include your <app-nav-bar></app-nav-bar> in your app-component, just above the <router-outlet> tag.

Doing this, will create the NavbarComponent but never destroys it till the app is running.

Hope this helps..!!