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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With