Angular Radio Button Binding using true false value

Question

I noticed I must use [value]=true as opposed to value = true in order for my radio button to get the initial value from the component class. How is this working - does putting brackets around value somehow tell Angular to use the initial value from [(ngModel)]?

HTML:

<input type="radio" id ="yesChoice" [(ngModel)] ="serverDeluxe" [value]=true  >
<label for="yesChoice">Yes</label>
<br>
<input type="radio" id ="noChoice"  [(ngModel)] ="serverDeluxe" [value]=false >
<label for="noChoice">No</label>

TS:

export class ServerComponent implements OnInit{
  serverId = 10;
  serverStatus = 'offline';
  serverDeluxe = true;

  ngOnInit(): void {

  }

  getServerStatus(): string{
    return this.serverStatus;
  }
}

Martin Parenteau · Accepted Answer · 2020-08-04 03:32:16Z

4

As explained in the Angular documentation:

The brackets, [], tell Angular to evaluate the template expression. If you omit the brackets, Angular treats the string as a constant and initializes the target property with that string:
<app-item-detail childItem="parentItem"></app-item-detail>
Omitting the brackets will render the string "parentItem", not the value of parentItem.

In your case, the brackets allow to set the radio input to a boolean value:

[value]="true" <---- Sets the value to the boolean true
value="true"   <---- Sets the value to the string "true"

The initial value of serverDeluxe is bound to the control with [ngModel] (which is a part of [(ngModel)]). Since serverDeluxe is a boolean property, it will never match the string "true" or "false".

edited Aug 4, 2020 at 3:32

answered Aug 4, 2020 at 0:46

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

4 Comments

BrooklynSon Over a year ago

thanks so I understand the brackets part now, however how does serverDeluxe bind it's value to [value] on load? For example if it is false, the radio button's will start with false. How is it doing that?

Martin Parenteau Over a year ago

The initial value of serverDeluxe is bound to the control with [ngModel] (which is also a part of [(ngModel)]). I added that part to the answer.

BrooklynSon Over a year ago

So it is matching to the [value] and then setting checked to true if the value matches?

Martin Parenteau Over a year ago

That is my understanding, and the behavior that we observe. You could can take a look at the code of ngModel, RadioControlValueAccessor and their base classes if you want to know the exact inner workings of the ngModel binding for radio buttons.

Dhiraj Singh · Accepted Answer · 2020-08-05 05:28:50Z

0

The above code is working for you because of [value] property. It treats the value as a dynamic value(as template expression) hence html is able to bind the radio option.

If we will provide value=true instead of [value]=true then we will have to provide name property.

For value=true it will take as value="true" and for [value]=true as value=true

edited Aug 5, 2020 at 5:28

answered Aug 4, 2020 at 5:55

Dhiraj Singh

794 bronze badges

2 Comments

BrooklynSon Over a year ago

thanks but the radio buttons above work fine without the name option, my question is how is my example working without the name option?

Dhiraj Singh Over a year ago

Edited my response to the question

Collectives™ on Stack Overflow

Angular Radio Button Binding using true false value

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related