Navbar Bootstrap Angular con ngSwitchCase

Comando: ng g c navbar-component

Ir a Terminal >> New Terminal >> cmd

C:\Angular\primo-progetto> ng g c navbar-component

Lo siguiente es ir a Bootstrap y selecciona un NavBar



Copiar y Pegar el código dentro del componente creado para luego ser modificado con *ngSwitchCase

En el navbar-component.html:

<nav class="navbar navbar-default">
<div class="container-fluid">

<!-- Brand y toggle se agrupan para una mejor visualización móvil -->

<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">


<!-- area modificada para el onClik del menu -->


<li><a href="#" value="1" (click)="onSelect(1)"> Item 1 <span class="sr-only">(current)</span></a></li>

<li><a href="#" value="1" (click)="onSelect(1)"> Item 2 <span class="sr-only">(current)</span></a></li>

<li><a href="#" value="1" (click)="onSelect(1)"> Item 3 <span class="sr-only">(current)</span></a></li>

<li><a href="#" value="1" (click)="onSelect(1)"> Item 4 <span class="sr-only">(current)</span></a></li>

<!--****************************************** -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default" >Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<!-- contenedores -->


<div [ngSwitch]="condicion">

    <div class="" *ngSwitchCase="1">
        <app-COMPONENTE-ITEN1></app-COMPONENTE-ITEN1>
    </div>

    <div class="" *ngSwitchCase="2">
        <app-COMPONENTE-ITEN2></app-COMPONENTE-ITEN2>
    </div>

    <div class="" *ngSwitchCase="3">
        <app-COMPONENTE-ITEN3></app-COMPONENTE-ITEN3>
    </div>

    <div class="" *ngSwitchCase="4">
        <app-COMPONENTE-ITEN4></app-COMPONENTE-ITEN4>
    </div>

    <div class="" *ngSwitchDefault></div>

</div>

En el navbar-component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-navbar-component',
templateUrl: './navbar-component.component.html',
styleUrls: ['./navbar-component.component.css']
})
export class NavbarComponentComponent implements OnInit {


condicion = 0;

onSelect(i: number) {

    this.condizione=i;

}

constructor() { }

ngOnInit(): void {}

}


En el app.component.html:

<app-navbar-component></app-navbar-component>