6

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?

Robb1
  • 3,949
  • 5
  • 27
  • 51

1 Answers1

12

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(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.

trisek
  • 463
  • 4
  • 10
  • 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