Switching bootstrap radio buttons with Angular 2+ from the template

Question

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.

Answer 1

I have a better solution. You might appreciate the simplicity. Because the user is actually going to click the radio button, they had it with ngmodel which passes data into field, which you don't want.

html

<div class="btn-group" role="group" aria-label="View Type">
   <button type="button" [class.active]="sortClass" (click)="switch(1)" class="btn btn-secondary">
      <span>Grid</span>
   </button>
   <button type="button" [class.active]="listClass" (click)="switch(2)" class="btn btn-secondary">
      <span>List</span>
   </button>
 </div>

component.ts

// Create variables
private sortClass: boolean;
private listClass: boolean;

// INITIALIZE TRUE / FALSE for both variables
constructor() {
    this.sortClass = false;
    this.listClass = true;
}

switch(i) {
        if (i === 1) {
            this.sortClass = !this.sortClass
            this.listClass = !this.listClass
        } else {
            this.listClass = !this.listClass
            this.sortClass = !this.sortClass
        }
    }

Then you will see one active, and the other false. When you click they will alternative true/false.