Switching bootstrap radio buttons with Angular 2+ from the template

I am trying to switch a set of radio buttons with angular class and attribute statements. When I click the buttons I can see the active class being added and removed as required and the checked attribute being set too. However the radio button doesn't actually get checked.

<div class="btn-group " data-toggle="buttons">
<label class="btn btn-primary" [ngClass]="{'active': s}">
<input type="radio" name="options" id="option1" autocomplete="off" (click)="s=true" [attr.checked]="s"> Yes
</label>
<label class="btn btn-primary" [ngClass]="{'active': !s}">
<input type="radio" name="options" id="option2" autocomplete="off"(click)="s=false" [attr.checked]="!s"> No
</label>
</div>


Live demo of the problem

Using Angular 5, bootstrap 4.0.0

EDIT: Not a duplicate because I know there are other ways of doing it. But I am trying to figure out why the above method isn't working.

EDIT2: If I bind to a function with (click)="doSomething()" it works! but also causes an error because the function isn't defined. If I create the function it stops working again.

Continue reading...