Reputation: 1781
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...
Upvotes: 3
Views: 4824
Reputation: 495
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>
Upvotes: 0
Reputation: 658263
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">
Upvotes: 6