Angular template reference variable for radio buttons

Question

I know about this:

<input type="text" #inp>
<button type="button" (click)="onClick(inp.value)">Click</button>

So I get the value I typed into textbox without having to use ngModel directive.

Is there any similar approach to work with radio buttons without having to use ngModel?

<input type="radio" value="selected" name="viewType">Selected
<input type="radio" value="unselected" name="viewType">Unselected
<input type="radio" value="both" name="viewType">Both

Below these radio buttons I have a refresh button like this:

<button (click)="refreshView()">Refresh</button>

These html input elements aren't part of any form tag. What I want is to have a "refreshView" function call with a parameter - the selected radio button value.

Is this possible?

It can probably be done but it would be easier with ngModel. Is there a reason for not using it? — Martin Parenteau
– Martin Parenteau, Commented Feb 24, 2019 at 21:28
Just to avoid creating an extra variable simply to hold the viewType which is not used anywhere else. "refreshView" function could do all the setup if it can get the correct viewType from the template. — robert
– robert, Commented Feb 24, 2019 at 21:35

Martin Parenteau · Accepted Answer · 2019-02-24 22:06:46Z

10

If you have only a few radio buttons, the following syntax would work. It gets the value associated with the radio button that is checked, with the help of nested conditional operators.

<input #rad1 type="radio" value="selected" name="viewType" >Selected
<input #rad2 type="radio" value="unselected" name="viewType" >Unselected
<input #rad3 type="radio" value="both" name="viewType" >Both

<button (click)="refreshView(rad1.checked ? rad1.value : rad2.checked ? rad2.value : rad3.checked ? rad3.value : null)">Refresh</button>

See this stackblitz for a demo.

answered Feb 24, 2019 at 22:06

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

robert Over a year ago

Yes, I have only these three options. Thank you this works great and for the demo and docs links.

Collectives™ on Stack Overflow

Angular template reference variable for radio buttons

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related