Question 43429 in Html Question posted in
Some basic documentation can be found here.

How to show a part of a component component based on the route – Html

I’m trying to show a part of my header component just in some routes. Here is my header component:

<div id="cabecalho" class="p-2">
<div class="row">
<div class="col mt-2">
  <div *ngIf="this.unidadeAtendimento == 8">
    <img src="../../../assets/imagens/logo-stl-removebg-preview.png" alt="logo-stl" class="logo-stl mt-1"/>
  </div>
</div>
<!-- here starts the part that I want to show just in some routes -->
<div class="col text-center mt-2">
  <a [routerLink]="['/lista-contas']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento }">
    <i class="bi bi-receipt"></i>
    <p>
      Contas
    </p>
  </a>
</div>
<div class="col text-center mt-2">
<a [routerLink]="['/cti/home']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento}">
    <i class="bi bi-hospital"></i>
    <p>
      Internação
    </p>
  </a>
</div>
<div class="col text-center mt-2">
  <a [routerLink]="['/tela-upload']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento}">
    <i class="bi bi-upload"></i>
    <p>
      Upload
    </p>
  </a>
</div>
<!-- here it ends -->
<div class="col text-end" *ngIf="this.unidadeAtendimento != null">
  <button class="btn btn-danger mt-3 me-5" (click)="logout()">Sair</button>
</div>

And here is my routing component:

const routes: Routes = [
{
  path:'cti/home',
  component:HomeComponent,
},    
{
  path:'tela-de-escolha',
  component:TelaDeEscohaComponent,
},
{
  path:'lista-contas',
  component:ListaContaComponent,
},
{
  path:'tela-upload',
  component:TelaUploadComponent
}
];

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

I don’t want to show the part of the component just in the route ‘tela-de-escolha’. Some one know how can I do this?

Tags:

2

Answers


  1. 0

    You can use the *ngIf directive in conjunction with the injected Router service.
    Inject the Router service in the constructor:

    constructor(readonly router: Router) {}

    Now you can add the *ngIf condition to the part of the component that you only want to display in certain routes. Check that the current URL is not equal to the route ‘tela-de-escolha’:

    <div *ngIf="router.url !== '/tela-de-escolha'">
  ...
</div>

    This will ensure that part of the component will only be displayed on routes other than ‘tela-de-escolha’.

    Login or Signup to reply.
  2. 0

    Along with the previous answer (@SparrowVic) you can also consider creating a new component that will contain the view you want to be toggled depending on a condition, and have header component load it if the condition is met. That would make it more readable and easier to maintain.

    Furthermore, depending on your particular use-case, if there is a good possibility that there would be actually two types of users – one that is usually visiting only the "tela-de-escolha" without accessing other pages, and the other that’s accessing other pages and usually has no intention to land on "tela-de-escolha" – you might consider lazy loading the aforementioned (new) view component (not the route, just the component) if the condition is met. That way your project might be loading bit faster (again, depending on the structure and use-cases).

    If you go with it, see about using ngComponentOutlet and importing with from() in your header’s ts.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search