angular - Angular 2 Material 2 radio button default selection

Question

I have a radio btn group and I would like to have one selected based on the value of an ngRx Observable.

<md-radio-group (change)="onTodoFilter($event.value);">
    <md-radio-button value="SHOW_ALL_TODO">All</md-radio-button>
    <md-radio-button value="SHOW_STARTED_TODO">Started</md-radio-button>
    <md-radio-button value="SHOW_COMPLETED_TODO">Completed</md-radio-button>
  </md-radio-group>

For the Observable I have:

this.todoVisibilityFilter$ = store.select('todoVisibilityFilterReducer');

I would like to use the async pipe and do a compare from the latest/current value of the Observable and the value of the radio button, but I can't figure our the syntax...

Answer 1

I haven't tried it myself but I expect this to do what you want:

<md-radio-group [value]="todoVisibilityFilter | async" 
    (change)="onTodoFilter($event.value);">

See also https://github.com/angular/material2/blob/6e4fe5e4172bb150f8d46c9f007ba2c2ff5bdf3a/src/components/radio/README.md where they use the value property for two-way-binding:

<md-radio-group [(value)]="groupValue">

Answer 2

Here it is :

//it is your component
selectedItem: String = "true";

<md-radio-group [(ngModel)]="selectedItem">
  <md-radio-button value="true">Department</md-radio-button>
  <md-radio-button value="false">Service</md-radio-button>
</md-radio-group>