Based on if else conditon show the sidebars in angular

Question

I am beginner in angular. I am working on project like want to give if else condition in root and if means shows one sidebar1 and else means sidebar2.i do not know am doing correct or not

In app.component.html
<div *ngIf ="show; else hide">
<sidebar1-cmp></sidebar1-cmp>
<ng-template #hide>
<Sidebar2-cmp></sidebar2-cmp>
</ng-template>
</div>

Simply If() { Shows sidebar1} Else {shows sidebar2}

I do not know,how do use this reference variable(#show,#hide) in child components(sidebar1,sidebar2)

Does this answer your question? [How can I use "\*ngIf else"?](https://stackoverflow.com/questions/43006550/how-can-i-use-ngif-else) — Liam, Mar 16 '22 at 16:33

score 0 · Answer 1 · answered Mar 16 '22 at 16:37

0

Try moving the *ngIf to sidebar1 component tag, like the following:

<div>
  <sidebar1-cmp *ngIf="show; else hide"></sidebar1-cmp>
  <ng-template #hide>
    <Sidebar2-cmp></sidebar2-cmp>
  </ng-template>
</div>

answered Mar 16 '22 at 16:37

Mateus Schneiders

4,853
3
20
40

Okay.thank you @ mateus schneiders one more doubt is how could i use show and hide in child components – Parjith R Mar 16 '22 at 17:20

Based on if else conditon show the sidebars in angular

1 Answers1