CODEWITHSUNDEEP
angularangular-material
user3097695
user3097695

Reputation: 1274

Angular material radio button checked from Input()

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:

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

What is wrong?

Upvotes: 1

Views: 1774

Answers (1)

andrew ferguson
andrew ferguson

Reputation: 189

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.

Upvotes: 1

Related Questions