Search code examples
angularconditional-statementsangular-ng-if

use "or" on *ngIf to check one or another value of a variable


scenario: I'm working on a project were i have to show the diferent components of an orchestra using buttons. what i did was set a variable called "component" in my class, like this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-orchestra',
  templateUrl: './orchestra.component.html',
  styleUrls: ['./orchestra.component.scss']
})
export class OrchestraComponent implements OnInit {

component:string

ngOnInit() {

  }
}

and made a method that receibes the parameter "ins" (for instrument) and change the variable value to that parameter:

selected(ins){
  this.component = ins
}

and on my template i made some buttons and divs:

<button (click)="selected('violines')">violines</button>
<button (click)="selected('percussion')">percussion</button>
<button (click)="selected('doublebass')">double bass</button>

<div *ngIf="component === 'violines'">All the violines here</div>
<div *ngIf="component === 'percussion'">All the percussion here</div>
<div *ngIf="component === 'doublebass'">All the doublebass here</div>

The problem:

Everything works perfect so far, but i want to make a button that shows ALL instruments on the screen, so i thought about making a button that sets the "ins" variable to a value 'all', but i don't know if that's posible to check two values of a variable using *ngIf, something like this:

<div *ngIf="component === 'violines' or 'all'">All the violines here</div>

Solution

  • Why don't just do that ?

    <div *ngIf="component === 'violines' || component === 'all'">All the violines here</div>