<mat-dialog-title> et <mat-dialog> ne sont pas reconnus, mais <mat-dialog-actions> et <mat-dialog-content> est reconnu

Question

Navigateur utilisé - Chrome 67.0.3396.99 J'ai créé un DialogsModule qui a un composant ConfirmDialog.component.ts avec le modèle suivant confirm-dialog.component.html

<mat-dialog>    
    <mat-dialog-title>{{title}}</mat-dialog-title>
    <mat-dialog-content>{{message}}</mat-dialog-content>
    <mat-dialog-actions> 
        <button type="button" mat-raised-button color="primary"
            (click)="dialogRef.close(true)">Yes</button>
        <button type="button" mat-button 
            (click)="dialogRef.close()">No</button>
     </mat-dialog-actions>
</mat-dialog>

Je reçois une erreur suite à une erreur

*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. ("<mat-dialog> [ERROR ->]<mat-dialog-title>{{title}}</mat-dialog-title>
<mat-dialog-content>{{message}}</mat-dialog-content>"): 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 ->]<mat-dialog> 
<mat-dialog-title>{{title}}</mat-dialog-title>
<mat-dialog-content>{{message}}</mat"): ng:///DialogsModule/ConfirmDialog.html@1:0*

Si je supprime et élément du modèle, tout fonctionne bien. Voici un autre code

confirm-dialogs.component.ts

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<ConfirmDialog>) {
    }
}

Dialogs.module.ts

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 { }

dialogs.service.ts

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<boolean> {

        let dialogRef: MatDialogRef<ConfirmDialog>;

        dialogRef = this.dialog.open(ConfirmDialog);
        dialogRef.componentInstance.title = title;
        dialogRef.componentInstance.message = message;

        return dialogRef.afterClosed();
    }
}

Et enfin le code d'appel

let res1
    this.dialogsService
      .confirm('Confirm Dialog', 'Are you sure you want to do this?')
      .subscribe(res => console.log(res));

Answer 1

mat-dialog-title devrait être plutôt utilisé comme directive et non comme composant

<p mat-dialog-title>{{title}}</p>

Et aussi je ne pense pas qu'il y ait mat-dialog directive ou composant de angulaire/matéria .