title: mat-stepper is not displaying within mat-dialog
body: <p>My mat-stepper was working fine when its was in home component. I wanted it to open on a dialog box so I placed all the codes inside the mat-dialog component but then it is not showing anything inside <code>&lt;mat-horizontal-stepper&gt;...&lt;/mat-horizontal-stepper&gt;</code>.<br>
  My dialog-component is</p>
  
  <pre><code>&lt;h2 mat-dialog-title&gt;Add Distributor &lt;button mat-dialog-close style="float:right"&gt;X&lt;/button&gt;&lt;/h2&gt;
  
  &lt;mat-dialog-content&gt;
    Hello
  
    &lt;mat-horizontal-stepper [linear]="true" #stepper="matHorizontalStepper" *ngIf="isAddNewDistributorClicked"&gt;
      &lt;mat-step [stepControl]="firstFormGroupDistributor"&gt;
        &lt;form [formGroup]="firstFormGroupDistributor"&gt;
          &lt;ng-template matStepLabel&gt;Identification&lt;/ng-template&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput placeholder="Distributor's Name" formControlName="distributor_name" required &gt;
          &lt;/mat-form-field&gt;
          &lt;br&gt;
          &lt;label&gt;Registered On&lt;/label&gt;
          &lt;mat-radio-group formControlName="distributor_identification_type" [(ngModel)]="distributor_identification_type" [ngModelOptions]="{standalone: true}"  (change)="distributor_identification_type_changed()" &gt;
            &lt;mat-radio-button value="VAT"&gt;VAT &lt;/mat-radio-button&gt;
            &lt;mat-radio-button value="PAN"&gt;PAN&lt;/mat-radio-button&gt;
          &lt;/mat-radio-group&gt;
          &lt;br&gt;
          &lt;mat-form-field *ngIf="distributor_identification_type=='VAT'"&gt;
            &lt;input matInput placeholder="VAT Registration Number" formControlName="distributor_VAT" type="number" &gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field *ngIf="distributor_identification_type=='PAN'"&gt;
            &lt;input matInput placeholder="PAN Registration Number" formControlName="distributor_PAN" type="number" &gt;
          &lt;/mat-form-field&gt;
          &lt;div&gt;
            &lt;button mat-raised-button color="primary" matStepperNext [disabled]="!firstFormGroupDistributor.valid"&gt;Next&lt;/button&gt;
            &lt;button mat-raised-button color="warn" (click)="onAddNewDistributorCancelled()" style="float:right"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/mat-step&gt;
    &lt;/mat-horizontal-stepper&gt;
  &lt;/mat-dialog-content&gt;
  </code></pre>
  
  <p>I have removed some code inside mat-horizontal-stepper as stackoverflow was telling me I have posted lot of codes than description. but these codes are working fine in my home.component. I just wanted to show it in a dialog box but now it is showing this much only</p>
  
  <p><a href="https://i.stack.imgur.com/5eyMt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5eyMt.png" alt="screenshot"></a></p>
  
  <p>why is this happening?</p>
  
  <p>While testing through <code>ng test</code>
  karma says </p>
  
  <pre><code>Failed: Template parse errors:
  Can't bind to 'linear' since it isn't a known property of 'mat-horizontal-stepper'.
  1. If 'mat-horizontal-stepper' is an Angular component and it has 'linear' input, then verify that it is part of this module.
  2. If 'mat-horizontal-stepper' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. .
  </code></pre>
  
  <p>then it says to all the properties.<br>
  <code>NO_ERRORS_SCHEMA</code> was already there in my app.module.. I have added <code>CUSTOM_ELEMENTS_SCHEMA</code> also but no effect</p>
  
  <p>My dialog.module.ts is</p>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
  
  @Component({
  selector: 'app-add-distributor-dialog',
  templateUrl: './add-distributor-dialog.component.html',
  styleUrls: ['./add-distributor-dialog.component.css']
  })
  export class AddDistributorDialogComponent implements OnInit {
  
      constructor(public dialogRef: MatDialogRef&lt;AddDistributorDialogComponent&gt;,
      @Inject(MAT_DIALOG_DATA) public data: any) { }
  
      ngOnInit() {
      }
      onNoClick(): void {
          this.dialogRef.close();
      }
  }
  </code></pre>