Multiple Conditions in ngIf in Angular 6

Question

I want to hide one div and want to show another for that I have written below code

My problem is I have used multiple conditions in ngIf but not working properly. Once I click on "Show sub content1" want to hide main content and want to show "Sub Content 1" and vise versa for all buttons. What should I do for this. Please help.

score 7 · Accepted Answer · edited Aug 21 '18 at 12:12

Your were just near to your result and looking into your code looks like you are learning, Good Work!! you have to check just if any one of the content is enable so you need to hide All of the three buttons and display your Sub contents. Below is the correct code as per your requirement,

<!-- Display all of the SubContents is disable. -->
<div *ngIf="!showSubContent && !showSubContentTwo && !showSubContentThree">
     <button (click)="showSubContent=!showSubContent">Show Sub content1</button>
     <button (click)="showSubContentTwo=!showSubContentTwo">Show Sub content2</button>
     <button (click)="showSubContentThree=!showSubContentThree">Show Sub content3</button> 
     <h2>  Main content </h2>
</div>

<!-- Display if SubContent-1 is enable. -->
<div *ngIf="showSubContent && !showSubContentTwo && !showSubContentThree">
    Sub Content 1 here
    <button (click)="showSubContent=!showSubContent">Show Main Content</button>
</div>

<!-- Display if SubContent-2 is enable. -->
<div *ngIf="showSubContentTwo && !showSubContent && !showSubContentThree">
    Sub Content 2 here
    <button (click)="showSubContentTwo=!showSubContentTwo">Show Main Content</button>
</div>

<!-- Display if SubContent-3 is enable. -->
<div *ngIf="showSubContentThree && !showSubContentTwo && !showSubContent">
    Sub Content 3 here
    <button (click)="showSubContentThree=!showSubContentThree">Show Main Content</button>
</div>

Thank you so much @Nasiruddin Saiyed :) – vedankita kumbhar Aug 21 '18 at 11:53 — vedankita kumbhar, Aug 21 '18 at 11:53
Code <3 !! Happy Coding!! – Nasiruddin Saiyed Aug 21 '18 at 11:54 — Nasiruddin Saiyed, Aug 21 '18 at 11:54

score 3 · Answer 2 · answered Aug 21 '18 at 12:16

You could simplify your code using ngSwitch:

<div [ngSwitch]="showSubContent">

  <div *ngSwitchDefault>
      <button (click)="showSubContent=1">Show Sub content1</button>
      <button (click)="showSubContent=2">Show Sub content2</button>
      <button (click)="showSubContent=3">Show Sub content3</button> 
      <h2>  Main content </h2>
  </div>

  <div *ngSwitchCase="1">
      Sub Content 1 here
  </div>

   <div *ngSwitchCase="2">
      Sub Content 2 here
  </div>


  <div *ngSwitchCase="3">
      Sub Content 3 here
  </div>

  <button *ngIf="showSubContent" (click)="showSubContent=0">Show Main Content</button>
</div>

score 1 · Answer 3 · answered Aug 21 '18 at 12:16

There is no need to use so many conditions to make work like this. This is not intutive as well to understand your logic instead use switch

// Define a variable with name content in component
export class AppComponent  {
content = 'mainContent'
constructor() {
}}

<div>
   <button (click)="content='showSubContent'">Show Sub content1</button>
   <button (click)="content='showSubContentTwo'">Show Sub content2</button>
   <button (click)="content='showSubContentThree'">Show Sub content3</button>
 </div>
<div [ngSwitch]="content">

 <div *ngSwitchDefault>
   My Main content
  </div> 
<div *ngSwitchCase="'showSubContent'">
   Sub Content 1 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>

<div *ngSwitchCase="'showSubContentTwo'">
   Sub Content 2 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>

<div *ngSwitchCase="'showSubContentThree'">
   Sub Content 3 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>
</div>

Multiple Conditions in ngIf in Angular 6

3 Answers3

Linked