Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 - Show/Hide section on selection of radio button

I have to show or hide sections based on selection of radio button

 <input name="options"  [(ngModel)]="options" type="radio" [value]="true" [checked]="options==true"/> Yes

    <input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="options==false"/> No</label>

<div>
      <h2 ng-show="options == 'true'">Supply</h2>
      <h2 ng-show="options == 'false'">Demand</h2>
</div>

If the user clicks on Yes then we have to show 'Supply' and hide 'Demand' If the user clicks on No then we have to show 'Demand' and hide 'Supply.

But now while loading the form itself both Supply and Demand is displaying on the screen.

like image 723
Jan69 Avatar asked Jul 24 '17 17:07

Jan69


Video Answer


1 Answers

In Angular it can be achieved with *ngIf:

 <input name="options"  [(ngModel)]="options" type="radio" [value]="true" [checked]="options"/> Yes

 <input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="!options"/> No

 <h2 *ngIf="options">Supply</h2>
 <h2 *ngIf="!options">Demand</h2>

And no need to check if option==true or false, [checked]="options" and [checked]="!options" do the same.

like image 105
Vega Avatar answered Sep 29 '22 14:09

Vega