Angular2 - Show/Hide section on selection of radio button
<div>
<div class="radio">
<label><input type="radio" [(ngModel)]="model.prop" name="prop" value="A">A</label>
</div>
<div class="radio">
<label><input type="radio" [(ngModel)]="model.prop" name="prop" value="B">B</label>
</div>
<div class="radio">
<label><input type="radio" [(ngModel)]="model.prop" name="prop" value="C">C</label>
</div>
</div>
<div *ngIf="model.prop === 'A'">A</div>
<div *ngIf="model.prop === 'B'">B</div>
<div *ngIf="model.prop === 'C'">C</div>
if you want to preselect the value type then type
model.prop = 'A';
in your .ts file
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.