Showing elements depending on which mat-radio-button is checked-CodePudding

I'm having issues figuring out how to reveal and hide elements based on what radio button is selected. This is the pseudocode of what I have so far:

  <mat-radio-button [value]="0">BUTTON A</mat-radio-button>
  <mat-radio-button [value]="1">BUTTON B</mat-radio-button>
  <h1 *ngIf="buttonA === '0'">Button A is selected</h1>
  <h1*ngIf="buttonB=== '1'">Button B is selected</h1>

When radio button A is selected, it should reveal "Button A" h1. When button B is selected, it should reveal "Button B" h1 while disappearing "Button A" h1 and vice versa.

My assumption is that both h1 tags will need ngIf in order to know when to appear / disappear depending on which checkbox is selected.

CodePudding user response：

I don't know specifically how mat-radio-button works, however, normally radio buttons set a common value that can be inspected. I don't see anything in your code that is setting the values buttonA or buttonB. So I would expect you are not seeing either h1 element.

You need to inspect whatever field `[value]="0" and [value]="1" are setting.

A quick look and you should likely be using mat-radio-group to contain the buttons see

https://material.angular.io/components/radio/overview#radio-groups

Radio groups Radio-buttons should typically be placed inside of an unless the DOM structure would make that impossible (e.g., radio-buttons inside of table cells). The radio-group has a value property that reflects the currently selected radio-button inside of the group.

Individual radio-buttons inside of a radio-group will inherit the name of the group.

The key part here is "The radio-group has a value property that reflects the currently selected radio-button inside of the group"

This is the value you want to compare against for your *ngIf statements. So something like this

<mat-radio-group [value]="selectedValue">
    <mat-radio-button [value]="0">BUTTON A</mat-radio-button>
    <mat-radio-button [value]="1">BUTTON B</mat-radio-button>
</mat-radio-group>

<h1 *ngIf="selectedValue === 0">Button A is selected</h1>
<h1 *ngIf="selectedValue === 1">Button B is selected</h1>

CodePudding user response：

You basically have two options here.

First Approach (Using ngModel)

using ngModel on mat-radio-group essentially keeping a component variable in sync with the template. You can do something like this

something.component.html

<mat-radio-group [(ngModel)]="selectedValue">
  <mat-radio-button [value]="0">BUTTON A</mat-radio-button>
  <mat-radio-button [value]="1">BUTTON B</mat-radio-button>
</mat-radio-group>

<h1 *ngIf="selectedValue === 0">Button A is selected</h1>
<h1 *ngIf="selectedValue === 1">Button B is selected</h1>

and in something.component.ts declare the variable

selectedValue: number;

Second Approach (using change event)

something.component.html

<mat-radio-group (change)="onChange($event)">
  <mat-radio-button [value]="0">BUTTON A</mat-radio-button>
  <mat-radio-button [value]="1">BUTTON B</mat-radio-button>
</mat-radio-group>

<h1 *ngIf="selectedValue === 0">Button A is selected</h1>
<h1 *ngIf="selectedValue === 1">Button B is selected</h1>

change event is triggered whenever any selection of radio button inside the radio group is changed. Which calls a function onChange.

something.component.ts

export class Something {
  selectedValue: number;

  onChange(event: MatRadioChange) {
    this.selectedValue = event.value;
  }
}

onChange function basically assigns the value selected to the selectedValue variable