CODEWITHSUNDEEP
angulardialog
Robb1
Robb1

Reputation: 5025

Dialog in Angular without Component

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?

Upvotes: 7

Views: 13586

Answers (1)

trisek
trisek

Reputation: 789

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.

Upvotes: 20

Related Questions