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
– Kurt Hamilton, Commented Feb 21, 2020 at 14:53
I tried to explain better in my original post, check it out! — Robb1
– Robb1, Commented Feb 21, 2020 at 15:00

Jayme Klein · Accepted Answer · 2023-08-11 18:49:49Z

20

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, 2023 at 18:49

Jayme Klein

7310 bronze badges

answered Feb 21, 2020 at 14:58

trisek

7896 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robb1 Over a year ago

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 :)

enno.void Over a year ago

@Robb1 you can use the overlaymoduke of angular CDK

Rin and Len Over a year ago

And without Material ? The question doesn't ask for Material Design to be loaded into the project.

Collectives™ on Stack Overflow

Dialog in Angular without Component

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related