Try to search your question here, if you can't find : Ask Any Question Now ?

Angular material dynamic radio button able to select multiple but should allow only once in a group

HomeCategory: stackoverflowAngular material dynamic radio button able to select multiple but should allow only once in a group
Avatarrupesh asked 3 months ago

I have an angular-material Tree with creating check boxes and radio button dynamically based on array

Array as follows:

{
    "Documents": {
      "angular": {
        "src": {
          "core": 0,
          "compiler": 0
        }
      },
      "material2": {
        "src": {
          "button": 1,
          "checkbox": 1,
          "input": 1
        }
      }
    }............................etc
}

html part as follows:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
    <div *ngIf="node.type;else other_content">
      <mat-checkbox>Check me!</mat-checkbox>
</div>

<ng-template #other_content>
  <mat-radio-group>
  <mat-radio-button value=" {{node.filename}}">{{node.filename}}</mat-radio-button>
</mat-radio-group>
</ng-template>

  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.filename">
      <mat-icon>
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.filename}} : {{node.type}}
  </mat-tree-node>
</mat-tree>

Angular Tree Reference Example

It looks as follows:

enter image description here

The issue is that as shown in picture I am able to check all radio button in a particular level of tree. But it should allow only one radio button from radio button group.

The issue occur because of below:

<loop .....>

<mat-radio-group>
  <mat-radio-button value=" {{node.filename}}">{{node.filename}}</mat-radio-button>
</mat-radio-group>
</loop end>

But in single iteration one set of <mat-radio-group> is created but it should create as below:

<mat-radio-group>
      loop through <mat-radio-button>
    </mat-radio-group>

What should I do to make only Radio button can be selected in a particular group?

1 Answers
Best Answer
AvatarMikhail answered 3 months ago
Your Answer

15 + 3 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com