Angular2 - Show/Hide section on selection of radio button

angular radio-button primeng
Jan69 picture Jan69 · Jul 24, 2017 · Viewed 24k times · Source

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.

Answer

Vega picture Vega · Jul 24, 2017

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.

Related questions

Angular2 - Radio Button Binding

I want to use radio button in a form using Angular 2 Options : <br/> 1 : <input name="options" ng-control="options" type="radio" value="1" [(ng-model)]="model.options" ><br/> 2 : <input name="options" ng-control="options" type="radio" value="2" [(…

Read More
Angular 4 default radio button checked by default

I'm trying to mark as a default a radiobutton depending on the value I get from my object, it can be True or False. What could I do to mark as a default radiobutton depending on the option? <label&…

Read More
What is the difference between formControlName and FormControl?

I'm using ReactiveFormsModule of Angular2 to create a component that contains a form. Here is my code: foo.component.ts: constructor(fb: FormBuilder) { this.myForm = fb.group({ 'fullname': ['', Validators.required], 'gender': [] }); } foo.component.html (with [formControl]): <div class="…

Read More