Angular material radio button checked from Input()

Question

I have following html file

<mat-menu #appMenu="matMenu" class="mat-menu-panel-max-width-none">
<mat-radio-group #radioGroup>
<div *ngFor="let item of items, let i=index">
      <mat-radio-button color="primary"
       [value]="item.value"
       [checked]="item.selected"
       class="mat-menu-item"
       (change)="handleSelection(i)">
   {{item.name}}
  </mat-radio-button>
    </div>
</mat-radio-group>
 </mat-menu>

And ts file.

  import { Component, EventEmitter, Input, Output } from '@angular/core';
  @Component({
    selector: 'item-selection',
    templateUrl: './item-selection.component.html',
 })
export class ItemsComponent {
 @Input() items: any;
 @Output() electionHandler = new EventEmitter();

 constructor() { }

 handleSelection(id) {
 electionHandler.emit({id:id});
 }
 }

Here are steps my code is doing:

Select a item from the menu.
The result is sent to ngrx store.
new Input values, items, are set to "item.selected=false" by observable selector.
After this, I still see the item is selected. The intent is to reset all items unselected after each action.

What is wrong?

I would change your Title to include the fact that you are using angular material — gh9
– gh9, Commented Jun 26, 2018 at 17:22
Avoid not to create a variable of the same name as an object property. electionHandler.emit({id:id}); here, id is property and another id is variable passed in function. — Rohit.007
– Rohit.007, Commented Jun 26, 2018 at 17:31
Point taken although it is not related what the question is asking. — user3097695
– user3097695, Commented Jun 26, 2018 at 17:35

andrew ferguson · Accepted Answer · 2018-06-26 17:28:31Z

1

Instead of trying to manually manage the 'checked' state of the radio button. I would personally try to leverage the native HTML functionality and give the radios the same 'name' value of the same value or if your using Reactive Forms, the formControlName property will also accomplish the same thing. And they 'check' and 'uncheck' themselves as the user selects from the form.

answered Jun 26, 2018 at 17:28

andrew ferguson

1893 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3097695 Over a year ago

I need to reset all radio buttons to "unchecked" after each selection. This is my requirement because the Input(), items, changes from observable feed in the parent component.

Collectives™ on Stack Overflow

Angular material radio button checked from Input()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related