Hola soy nuevo en Angular y estoy haciendo una web pero tengo un detalle que no puedo resolver, en el app component tengo un simple texto "Texto de ejemplo" y también un componente navbar , lo que quiero es que cuando yo de click en otra sección del navbar desaparezca ese texto y solo muestre el componente que corresponde, hasta ahora al hacer click carga el componente que le corresponde pero el txt del app.component no desaparece y se muestra junto con el contenido de los otros. De antemano gracias.
App.component.html
<app-barra-nav-sup></app-barra-nav-sup>
<router-outlet></router-outlet>
<div>
<p>Texto de muestra</p>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
navbar.component
<nav class="navbar sticky-top navbar-expand-md navbar-light" style="background-color: #00cc00;">
<!-- <div class="mx-auto d-sm-flex d-block flex-sm-nowrap"> -->
<a class="nav-link" href="#">
<h5>Inicio</h5>
</a>
<button class="navbar-toggler mr-left custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav navbar-primary w-100 ml-auto">
<li class="nav-item active">
<a class="nav-link" aria-current="page" routerLink='productos'>Productos</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='proveedores'>Proveedores</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='distribuidores'>Distribuidores</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='contacto'>Contacto</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='acercade'>Acerca De</a>
</li>
</ul>
</div>
</nav>