angular filter mat radio display from a mat-radio group

Issue

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'},
  ]

Solution

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>

Answered By - Eliseo