Skip to main content
Origen Enlace

¿Como ocultar un componente cuando cambie la ruta en Angular?

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>