Dialog in Angular without Component

Question

Is there a way in Angular 8 to generate a small dialog without having to create a new Component? Some small message like "Operation completed" that wouldn't require much interaction with the user. I just feel like having 4 more files in a project just to display a success message would be too much:

small-dialog.component.html
small-dialog.component.scss
small-dialog.component.spec.ts
small-dialog.component.ts

Or maybe there's a way to create a "default component" in few lines without having to actually generate a new component?

What's your use case for not wanting to create a new component? To me this is the perfect example of when to create a reusable component? — Kurt Hamilton, Feb 21 '20 at 14:53
I tried to explain better in my original post, check it out! — Robb1, Feb 21 '20 at 15:00
Answered here! https://stackoverflow.com/a/67264069/12834967 — Costly Developer, Apr 26 '21 at 12:15

score 17 · Accepted Answer · edited Aug 11 '23 at 18:49

17

If you don't want to create component for dialog itself you can do something like this:

View.html

<button (click)="openDialog(template)">Open my dialog</button>
<ng-template #template>
 <h1>This is a message</h1>
</ng-template>

Component.ts

import {MatDialog, MatDialogRef} from '@angular/material/dialog';

 
constructor(public dialog: MatDialog) {}

openDialog(templateRef) {
  let dialogRef = this.dialog.open(templateRef, {
   width: '300px'
 });
}

Here is also one example how you can do the same thing.

But I propose to you that you create generic dialog component which you can use through the whole application, how to get started with that you can see it here.

Update: How to create a dialog without Material components can be seen here.

edited Aug 11 '23 at 18:49

dead.py

17
7

answered Feb 21 '20 at 14:58

trisek

701
6
14

Thanks for your answer! How should I define `this.dialog`? And what if the data I want to display is just a string? Sorry but I'm really a beginner in Angular :) – Robb1 Feb 21 '20 at 15:03
@Robb1 you can use the overlaymoduke of angular CDK – enno.void Feb 21 '20 at 15:04
And without Material ? The question doesn't ask for Material Design to be loaded into the project. – Rin and Len Oct 10 '22 at 13:48

Dialog in Angular without Component

1 Answers1