title: Display Element with Angular 6 (Angular Material) Radio Button and *ngIf
body: <p>I am trying to implement that different views are shown on the screen depending on a radio button selected, all this with Angular material, <code>NgModel</code>, <code>NgIf</code>. But I can not do it. Please help.</p>
  
  <p>HTML code: </p>
  
  <pre><code>&lt;mat-radio-group [(ngModel)]="expressType"&gt;
    &lt;mat-radio-button class="example-radio-button" *ngFor="let te of typeExpress" [value]="te"&gt;
      {{ te }}
    &lt;/mat-radio-button&gt;
  &lt;/mat-radio-group&gt;
  
  &lt;ng-template *ngIf="te == 'Component 1'"&gt;
    &lt;app-component1&gt;&lt;/app-component1&gt;
  &lt;/ng-template&gt;
  &lt;ng-template *ngIf="te == 'Component 2'"&gt;
    &lt;app-component2&gt;&lt;/app-component2&gt;
  &lt;/ng-template&gt;
  &lt;ng-template *ngIf="te == 'Component 3'"&gt;
    &lt;app-component3&gt;&lt;/app-component3&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>TypeScript code: </p>
  
  <pre><code>expressType: string;
  typeExpress: string[] = ['Component 1', 'Component 2', 'Component 3'];
  
  radioOptions: FormGroup; 
  </code></pre>