绑定[！hidden]以选择Angular 2的盒子选项

Question

I'm trying to add a show/hide behavior to a select box using Angular 2+ so basically I have :

 <select>
      <option disabled selected>Flow progres</option>
      <option *ngFor='let flow of flows'>{{flow}}</option>
    </select>

      <div [hidden]="true">
        <p>The flow progress is on going</p>
      </div>

and .ts:

export class ProductListComponent implements OnInit{
    flows = ["Passed",'Waiting','In Progres',' Failed'];
}

so when "in progress" option will be selected I want to show that hidden div, otherwise the div will be hidden for the other options.

Answer 1

Create a variable inside component.

public showHide:boolean = false; //Set default value if you like else not

Add onChange event on select like:

<select #t (change)="handleSelectedValue(t.value)">
      <option disabled selected>Flow progres</option>
      <option *ngFor='let flow of flows'>{{flow}}</option>
    </select>

in component write the function like this:

handleSelectedValue(value) {
 // Get and value and assign it to variable declared above 
     if(value == 'In Progres')
    this.showHide = true;

}

in your html bind this showHide variable to Div like this:

<div *ngIf="showHide">
        <p>The flow progress is on going</p>
</div>

Answer 2

Change your HTML the following way. Import all your dependencies from angular core module.

<select [ngModel]="selected">
    <option disabled selected>Flow progres</option>
    <option *ngFor='let flow of flows'>{{flow}}</option>
</select>

<div [hidden]="selected!=='In Progress'">
    <p>The flow progress is on going</p>
</div>