angular filter mat radio display from a mat-radio group-CodePudding

as you can see on the screenshot below , I have 2 buttons using mat radio group , If modelForm.get('schedule').value is equal to '1' then only show radio button from the mat radio group where value is 'A' else show all value from stages which are 'A' and 'B' .

How do we do that ? how do we hide only certain button from the loop based on a value ? Thanks.

#SCREENSHOT

#html

<mat-radio-group [disabled]="!modelForm.get('schedule').value" [(ngModel)]="stage" layout="column">
                        <mat-radio-button *ngFor="let stage of stages" [value]="stage.text" color="primary">
                          {{ stage.text }}
                        </mat-radio-button>
                      </mat-radio-group>

#TS

  stages = [
    {id: 0, text: 'A'},
    {id: 1, text: 'B'},
  ]

CodePudding user response：

Note: when the value of schedule is changed to 1 you need to set the stage property to 'A' programmatically for this solution to work!

You can use html class to hide and show.

stackblitz

<mat-radio-group
      [disabled]="!formGroup.get('password').value"
      [(ngModel)]="stage"
      [ngModelOptions]="{ standalone: true }"
      layout="column"
    >
      <mat-radio-button
        *ngFor="let stage of stages"
        [value]="stage.text"
        color="primary"
        [ngClass]="{ isHidden: isHidden(stage) }"
      >
        {{ stage.text }}
      </mat-radio-button>
    </mat-radio-group>

styles.css

.isHidden {
  visibility: hidden;
  width: 0;
}

import { Component } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormControl,
  Validators,
} from '@angular/forms';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  formGroup: FormGroup;
  titleAlert: string = 'This field is required';
  post: any = '';
  stages = [
    { id: 0, text: 'A' },
    { id: 1, text: 'B' },
  ];

  isHidden(stage) {
    return (
      this.formGroup.get('password').value === '1' && stage && stage.id === 1
    );
  }

CodePudding user response：

instead of `[hidden] you can use

[style.display]="isHidden(stage)?'none':null"

Another way can be

  <mat-radio-group [(ngModel)]="stage" layout="column">
     <!--always show the first you use "stages[0]"-->
     <mat-radio-button [value]="stages[0].text">
        {{ stages[0].text }}
     </mat-radio-button>

     <!--the rest show or not-->
     <ng-container *ngIf="modelForm.get('schedule').value !== '1'">
        <ng-container *ngFor="let stage of stages;let first=first"> 
           <mat-radio-button *ngIf="!first"
                [value]="stage.text" color="primary">
                          {{ stage.text }}
           </mat-radio-button>
       </ng-container>
     <ng-container>
  </mat-radio-group>