title: <mat-dialog-title> and <mat-dialog> are not know recognized but <mat-dialog-actions> and <mat-dialog-content> is recognized
body: <p>Browser used - Chrome 67.0.3396.99</p>
  
  <hr>
  
  <p>I have created a <code>DialogsModule</code> which has a component <code>ConfirmDialog.component.ts</code> with the following template <code>confirm-dialog.component.html</code></p>
  
  <p><strong>confirm-dialog.component.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;mat-dialog&gt;    
          &lt;mat-dialog-title&gt;{{title}}&lt;/mat-dialog-title&gt;
          &lt;mat-dialog-content&gt;{{message}}&lt;/mat-dialog-content&gt;
          &lt;mat-dialog-actions&gt; 
              &lt;button type="button" mat-raised-button color="primary"
                  (click)="dialogRef.close(true)"&gt;Yes&lt;/button&gt;
              &lt;button type="button" mat-button 
                  (click)="dialogRef.close()"&gt;No&lt;/button&gt;
           &lt;/mat-dialog-actions&gt;
      &lt;/mat-dialog&gt;
  </code></pre>
  
  <p>I am getting the following error</p>
  
  <pre class="lang-sh prettyprint-override"><code>    *Uncaught Error: Template parse errors:
      'mat-dialog-title' is not a known element:
      1. If 'mat-dialog-title' is an Angular component, then verify that it is part of this module.
      2. If 'mat-dialog-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("&lt;mat-dialog&gt; [ERROR -&gt;]&lt;mat-dialog-title&gt;{{title}}&lt;/mat-dialog-title&gt;
      &lt;mat-dialog-content&gt;{{message}}&lt;/mat-dialog-content&gt;"): ng:///DialogsModule/ConfirmDialog.html@2:1
      'mat-dialog' is not a known element:
      1. If 'mat-dialog' is an Angular component, then verify that it is part of this module.
      2. If 'mat-dialog' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR -&gt;]&lt;mat-dialog&gt; 
      &lt;mat-dialog-title&gt;{{title}}&lt;/mat-dialog-title&gt;
      &lt;mat-dialog-content&gt;{{message}}&lt;/mat"): ng:///DialogsModule/ConfirmDialog.html@1:0*
  </code></pre>
  
  <p>If I remove <code>&lt;mat-dialog&gt;</code> and <code>&lt;mat-dialog-title&gt;</code> element from the template then everything works fine. </p>
  
  <hr>
  
  <p>Below posted is my source code.</p>
  
  <p><strong>confirm-dialogs.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>    import { MatDialogRef } from '@angular/material';
      import { Component } from '@angular/core';
  
      @Component({
          selector: 'confirm-dialog',
          templateUrl: './confirm-dialog.component.html',
          styleUrls: ['./dialogs.scss']
      })
      export class ConfirmDialog {
  
          public title: string;
          public message: string;
  
          constructor(public dialogRef: MatDialogRef&lt;ConfirmDialog&gt;) {
          }
      }
  </code></pre>
  
  <p><strong>Dialogs.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>    import { DialogsService } from './dialogs.service';
      import { MatDialogModule, MatButtonModule } from '@angular/material';
      import { NgModule } from '@angular/core';
  
      import { ConfirmDialog }   from './confirm-dialog.component';
  
      @NgModule({
          imports: [
              MatDialogModule,
              MatButtonModule,
          ],
          exports: [
              ConfirmDialog,
          ],
          declarations: [
              ConfirmDialog,
          ],
          providers: [
              DialogsService,
          ],
          entryComponents: [
              ConfirmDialog,
          ],
      })
      export class DialogsModule { }
  </code></pre>
  
  <p><strong>dialogs.service.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>    import { Observable } from 'rxjs';
      import { ConfirmDialog } from './confirm-dialog.component';
      import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
      import { Injectable } from '@angular/core';
  
      @Injectable({
          providedIn: 'root'
      })
      export class DialogsService {
  
          constructor(private dialog: MatDialog) { }
  
          public confirm(title: string, message: string): Observable&lt;boolean&gt; {
  
              let dialogRef: MatDialogRef&lt;ConfirmDialog&gt;;
  
              dialogRef = this.dialog.open(ConfirmDialog);
              dialogRef.componentInstance.title = title;
              dialogRef.componentInstance.message = message;
  
              return dialogRef.afterClosed();
          }
      }
  </code></pre>
  
  <p>And finally the calling code</p>
  
  <pre class="lang-js prettyprint-override"><code>    let res1
          this.dialogsService
            .confirm('Confirm Dialog', 'Are you sure you want to do this?')
            .subscribe(res =&gt; console.log(res));```
  </code></pre>