How to Give Multiple Conditions in *Ngif Statement in Angular 6

Multiple Conditions in ngIf in Angular 6

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>

angular 4: *ngIf with multiple conditions

Besides the redundant ) this expression will always be true because currentStatus will always match one of these two conditions:

currentStatus !== 'open' || currentStatus !== 'reopen'

perhaps you mean one of

!(currentStatus === 'open' || currentStatus === 'reopen')
(currentStatus !== 'open' && currentStatus !== 'reopen')

How to use multiple conditions in *ngIf directive with or` || operator Angular 4

If the li elements are to be hidden when the user is logged in as user or admin, you should use:

*ngIf="!auth.loggedIn() && !admin.loggedIn()"

or

*ngIf="!(auth.loggedIn() || admin.loggedIn())"

---

With your current code

*ngIf="!auth.loggedIn() || !admin.loggedIn()"

the elements are hidden only if the user is logged in with both kinds of access at the same time, which is probably not possible.

How can I set multiple conditions on the same *ngIf within a tag?

[colspan]="is_admin ? 2 : 3"

How to use ngIf in Multiple conditions in html and angular

try this:

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select (selectionChange)="onSelectionChange($event)">
    <mat-option *ngFor="let item of services " [value]="item">
      {{item}}
    </mat-option>
  </mat-select>
</mat-form-field>

ts File:

onSelectionChange(event) {
 this.service = event;
}

in the template:

<div *ngIf ="service === 'Consult'">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry. has been the industry's
    standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make
    a type specimen book.</p>
</div>

<div *ngIf= "service === 'Data' ">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry. has been the industry's
    standard dummy text ever since the 1500, when an unknown printer took a galley of type and scrambled</p>
</div>

*ngIf else if in template

Another alternative is to nest conditions

<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>

---

Related Topics