If radio button is selected, show element in Angular 5

Question

I'm trying to get a radio button to display an element when the radio button is selected. I've tried multiple different solutions. [(ngModel)] would throw up errors.

I can't seem to get the value of the radio to pass through the ngIf and no matter how much I try I can't seem to get a "true" statement out to pass through the ngIf either.

Here is my .ts for the form:

import {Component, Input} from '@angular/core';
import {FormGroup} from "@angular/forms";
import { MdRadioChange } from '@angular/material';
@Component({
  selector: 'activation-role',
  template: `
    <div class="form-group" [formGroup]="group" >
      <mat-radio-group formControlName="role" [attr.data-optional]="canViewDiv">
        <mat-radio-button #{{role.id}} (change)="onRadioChange($event)" class="radio-button-vertical" *ngFor="let role of activation_roles" [value]="role.id">
          <div>{{role.label}}</div> 
          <mat-hint>{{role.additionalText}}</mat-hint>
        </mat-radio-button>
      </mat-radio-group>
    </div>`

})

export class ActivationRoleComponent {

  @Input() group: FormGroup;

  canViewDiv: boolean = true;

  onRadioChange(event: MdRadioChange) {

    if (event.value === 'option1') {
      this.canViewDiv = true;

      console.log(event.value);
      console.log(this.canViewDiv);
    } else {
      this.canViewDiv = false;

      console.log(event.value);
      console.log(this.canViewDiv);
    }
  }


  private activation_roles = [{
    id: 'option1',
    value: 'Option one',
    label: 'Option one',
    status: true,
    additionalText: 'This is additional text'
  },{
    id: 'option2',
    value: 'Option two',
    label: 'Option two',
    status: false,
    additionalText: 'This is additional text two'
  },{
    id: 'option3',
    value: 'Option three',
    label: 'Option three',
    status: false,
    additionalText: 'This is additional text three'
  }];

}export class ActivationRoleComponent {

  @Input() group: FormGroup;

  canViewDiv: boolean = true;

  onRadioChange(event: MdRadioChange) {

    if (event.value === 'option1') {
      this.canViewDiv = true;

      console.log(event.value);
      console.log(this.canViewDiv);
    } else {
      this.canViewDiv = false;

      console.log(event.value);
      console.log(this.canViewDiv);
    }
  }


  private activation_roles = [{
    id: 'option1',
    value: 'Option one',
    label: 'Option one',
    status: true,
    additionalText: 'This is additional text'
  },{
    id: 'option2',
    value: 'Option two',
    label: 'Option two',
    status: false,
    additionalText: 'This is additional text two'
  },{
    id: 'option3',
    value: 'Option three',
    label: 'Option three',
    status: false,
    additionalText: 'This is additional text three'
  }];

}

And here is my form html:

<mat-accordion>
        <!-- ROLE ACCORDION -->
        <mat-expansion-panel class="activation-form__role" expanded="true" #roleAccordion>
          <mat-expansion-panel-header #roleAccordionHeader>Your Role</mat-expansion-panel-header>

          <activation-role [group]="roleGroup"></activation-role>

          <mat-action-row>
            <button mat-button color="primary" class="activation-form__role__next-btn" (click)="expandStep(1)" [disabled]="roleGroup.invalid" >Next</button>
          </mat-action-row>
        </mat-expansion-panel>

        <mat-expansion-panel *ngIf="roleGroup?.data-optional === 'true'" class="rmb-form__corporate-details" #strataManagerDetailsAccordion [disabled]="detailsGroup.invalid">
        </mat-expansion-panel>
<mat-accordion>

Any help is appreciated.

Answer 1

There are some problems with your approach. First thing is, you are trying to use a boolean value which is inside a child component i.e. activation-role in your parent component i.e. form component. You need to emit the value from the child component to parent after it changes then show and hide the div in your parent component based on that value.

Also, in activation-role, you dont need to use form group of parent component by passing as an input because the form inside this component only has a radio button. You can achieve what you want without using form group inside the activation-route component and using ngModel.

I have created a stackblitz solution for you in which i have implemented activation-role component similar to your component. I didn't know about the form component so i have created my own custom form and used it in activation-role and based on the radio buttons in the activatation-role component, a mat-expnasion-panel is hidden or shown. Here is the link to the solution: Show hide div based on radio . In this solution, i am emitting the value of radio button from child component and using it in parent component. Try to understand what is being done in the solution so you can get better understanding of input and output in angular. For more on input output, see Input Output in Angular

Update for @Gaurang Sondagar I have modified the stackblitz according to your requirements. It contains 2 components, form-component and expansion-panel. The expansion panel contains contains the panel and the radio group.

In form-component there is allRadioPanels array, using which the panels are rendered. Each object of this array contains binded SelectedValue for radio button of each panel, binded Comments value for each panel and CommentsRequiredValue to tell which selected option means that comments are required for that panel.

On the bottom there is submit button which becomes disbaled if for any panel, the CommentsRequiredValue if equal to SelectedValue and Comments are blank.

For example, for Panel 2, the CommentsRequiredValue is Option 2 and the SelectedValue is initially set to Option 2 as well. The initially disabled submit button will enable if you change the value of Panel 2 radio from Option 2 or enter comments in it.

Will work similarly for all panels.