display angular filter for mat radio option selected from mat-radio group

Question

display angular filter for mat radio option selected from mat-radio group

On the screenshot provided below, there are 2 buttons within a mat radio group. The condition is that if modelForm.get('schedule').value equals '1', then only display the radio button with the value 'A'. Otherwise, show all values from stages which include 'A' and 'B'.

How can we achieve this? Is it possible to selectively hide buttons within a loop based on a specific value? Thank you.

#SCREENSHOT https://i.sstatic.net/1RmYP.png

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

javascript angular typescript

Answer 1

Answer №1

Try using the following instead of `[hidden]`:

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

Another approach could be:

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

  <!--show the rest based on condition-->
  <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>

Answer 2

Try using the following instead of `[hidden]`:

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

Another approach could be:

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

  <!--show the rest based on condition-->
  <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>

Answer 3

Answer №2

Important: It is crucial to remember that when the schedule value is switched to 1, you must programmatically set the stage property to 'A' for this solution to function correctly!

Utilizing html classes can help with hiding and displaying elements.

Check out the stackblitz demo here

<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;
}

ts

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
    );
  }

Answer 4

Important: It is crucial to remember that when the schedule value is switched to 1, you must programmatically set the stage property to 'A' for this solution to function correctly!

Utilizing html classes can help with hiding and displaying elements.

Check out the stackblitz demo here

<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;
}

ts

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
    );
  }

display angular filter for mat radio option selected from mat-radio group

Answer №1

Answer №2

Similar questions

Ways to restrict users from inputting alphabets in TextField using material ui

A Typescript type that verifies whether a provided key, when used in an object, resolves to an array

Iterating through each loop and storing the values in an array

WebStorm failing to identify Node.js functions

Is there an optimal method for executing shell commands quickly in Node.js?

How can I invoke TypeScript methods within a jQuery event handler in the ngAfterViewInit lifecycle hook?

Using Regular Expression to verify the presence of numbers and spaces

Handling Movement Events in PrimeNG PickList ComponentsExplore the onMove and onMoveAll event

What is the best approach for replacing numerous maps within an rxjs observable array?

Exciting discovery within my coding for US Number formatting!

What could be causing the JavaScript/jquery code in my Functions.php file to only function properly on the initial post that loads on my WordPress website?

Displaying a disabled div depending on the dropdown selection in Angular Material

The functionality of event bubbling appears to be ineffective while utilizing a bootstrap modal in an AngularJS application

Learn how to dynamically add and remove a CSS class from an element using a scroll event in Angular 7

Having difficulty executing a loop on the JSON response object

Tips for coordinating external asynchronous JavaScript retrieval

Placing emphasis on an object that appears following a period of waiting

The Issue with NG-Zorro Datepicker Manual Input Mask Functionality未分类

What is the best way to display a jQuery UI dialog when the page is reloaded?

How can one correctly log out of an Angular application that is integrated with Firebase Authentication and Firestore?