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>
Why don't just do that ?
<div *ngIf="component === 'violines' || component === 'all'">All the violines here</div>