DEV Community

Julie Cherner
Julie Cherner

Posted on

7

7 steps to Angular Material Dialog instead of Angular Component

Another way to create Angular UI Component is using Dialog from Angular Material. It is not recommended to replace all components with it but it is rather useful for interactive elements like pop-ups, warnings, errors, etc.
There are 7 steps on how to start using dialogs in your Angular project.

Step 1: Adjust Angular Material for your project and create a basic Angular component (current name example: MyCreatedDialog) and add dialog reference.

Import MatDialogRef from @angular/material and add it to the constructor.

class MyCreatedDialog implements OnInit {
    constructor (
        public dialogRef: MatDialogRef<MyCreatedDialog>,
        
    ) {}
    ngOnInit() {
        
    }
    
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Set modules in app.module.ts.

Import MatDialogModule, MatButtonModule (and others if needed) from Angular Material to app.module.ts and imported your MyCreatedDialog.component.ts.

Add your imported component to declarations and entryComponents of NgModule.

Add needed dialog modules to import of NgModule.
Example:

@NgModule({
    declarations: [..., 
        MyCreatedDialog
    ],
    entryComponents: [...,
        MyCreatedDialog
    ],
    imports: [...,
        MatDialogModule,
        MatButtonModule
    ], 
    
})
Enter fullscreen mode Exit fullscreen mode

Step 3: Import MyCreatedDialog into its father component (current name: FatherComponent). Import MatDialog from Angular Material and add it to the constructor.
Example:

class FatherComponent {
    constructor(
        ,
       private dialog: MatDialog
    ){}
    ...
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Control dialogs: open and get outputs.
Example:

openMyCreatedDialog() {
    const myCreatedDialogRef = this.dialog.open(MyCreatedDialog);
    myCreatedDialogRef.afterClosed().subscribe((res) => {
        //do things according to the received response and the aim
    })
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Add data input to MyCreatedDialog.
Add it to the function that opens the dialog:

openMyCreatedDialog() {
    const myCreatedDialogRef = this.dialog.open(MyCreatedDialog, { data: { title: I am a dialog } }););
    myCreatedDialogRef.afterClosed().subscribe((res) => {
        //do things according to the received response and the aim
    })
}
Enter fullscreen mode Exit fullscreen mode

Step 6: Use passed data in MyCreatedDialog.

Import MAT_DIALOG_DATA from @angular/material and inject it in the constructor. Import Inject from @angular/core as well.

class MyCreatedDialog implements OnInit {
    dialogTitle: string;
    constructor (
        public dialogRef: MatDialogRef<MyCreatedDialog>,
        @Inject(MAT_DIALOG_DATA) public data: any,
        
    ){}
    ngOnInit() {
        this.dialogTitle = this.data.title;
    }
    
}
Enter fullscreen mode Exit fullscreen mode

Step 7: Add function to html file of MyCreatedDialog.
Example:

<button (click)=openMyCreatedDialog(New meaningful title)></button>

Enter fullscreen mode Exit fullscreen mode

Step 8 - Extra: continue enjoying Angular :)

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay