Angular2 Programmatic changes to inputs do not cause change events to fire

Question

I have a button on a page that changes the checked state of a radio button. When that radio button is checked, it does something on its change event. But when it gets changed with the button, its own change event doesn't fire.

An example:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{name}}</h2>
      <button (click)="radio.checked = true">Click Here</button><br><br>
      <input #radio type="radio" (change)="name = '2nd Change'" value="test">  Radio Button<br><br><br><br>
    </div>
`})

In jQuery it would be a simple $("#radio").change();

What is the angular equivalent? So far I've come up with:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{name}}</h2>
      <button (click)="doThing(radio)">Click Here</button><br><br>
      <input #radio type="radio" (change)="name = '2nd Change'" value="test">  Radio Button<br><br><br><br>
    </div>
  `,
})
export class App {
  name:string = 'Test App';
  constructor() { }

  doThing(radio){
    radio.checked = true;
    radio.dispatchEvent(new Event('change'));
  }
}

It works, but it seems like quite the kludge.