3

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>
Carlos Pisarello
  • 1,254
  • 5
  • 20
  • 39

1 Answers1

5

Why don't just do that ?

<div *ngIf="component === 'violines' || component === 'all'">All the violines here</div>
Alexandre Annic
  • 9,942
  • 5
  • 36
  • 50