title: If radio button is selected, show element in Angular 5
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>Here is my .ts for the form:</p>
  
  <pre><code>import {Component, Input} from '@angular/core';
  import {FormGroup} from "@angular/forms";
  import { MdRadioChange } from '@angular/material';
  @Component({
    selector: 'activation-role',
    template: `
      &lt;div class="form-group" [formGroup]="group" &gt;
        &lt;mat-radio-group formControlName="role" [attr.data-optional]="canViewDiv"&gt;
          &lt;mat-radio-button #{{role.id}} (change)="onRadioChange($event)" class="radio-button-vertical" *ngFor="let role of activation_roles" [value]="role.id"&gt;
            &lt;div&gt;{{role.label}}&lt;/div&gt; 
            &lt;mat-hint&gt;{{role.additionalText}}&lt;/mat-hint&gt;
          &lt;/mat-radio-button&gt;
        &lt;/mat-radio-group&gt;
      &lt;/div&gt;`
  
  })
  
  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'
    }];
  
  }
  </code></pre>
  
  <p>And here is my form html:</p>
  
  <pre><code>&lt;mat-accordion&gt;
          &lt;!-- ROLE ACCORDION --&gt;
          &lt;mat-expansion-panel class="activation-form__role" expanded="true" #roleAccordion&gt;
            &lt;mat-expansion-panel-header #roleAccordionHeader&gt;Your Role&lt;/mat-expansion-panel-header&gt;
  
            &lt;activation-role [group]="roleGroup"&gt;&lt;/activation-role&gt;
  
            &lt;mat-action-row&gt;
              &lt;button mat-button color="primary" class="activation-form__role__next-btn" (click)="expandStep(1)" [disabled]="roleGroup.invalid" &gt;Next&lt;/button&gt;
            &lt;/mat-action-row&gt;
          &lt;/mat-expansion-panel&gt;
  
          &lt;mat-expansion-panel *ngIf="roleGroup?.data-optional === 'true'" class="rmb-form__corporate-details" #strataManagerDetailsAccordion [disabled]="detailsGroup.invalid"&gt;
          &lt;/mat-expansion-panel&gt;
  &lt;mat-accordion&gt;
  </code></pre>
  
  <p>Any help is appreciated.</p>