I need to write a error popup inside div without snackbars with TS-CodePudding

I need to write a popup error handler with html, angular and Typescript. Im trying to think of the best way to do it using ngFor loop for it. Whats the best way to approach it? Im a bit new to all this lol

CodePudding user response：

If you are using Angular material. You should try this:

import {Component} from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';

@Component({
  selector: 'some-Component ',
  templateUrl: 'someComponent.html',
})
export class someComponent {
  constructor(private _snackBar: MatSnackBar) {}

  errorDialog() {
    this._snackBar.open('Error..., 'x');
  }
}

Using snack bar from Angular material, you can do it as simple as calling this function to show a error message.

CodePudding user response：

Many-many ways to achieve this. Here is a small example.

<ng-container *ngFor="let notification of notifications">
  <div @fadeIn @fadeOut >
    <div>{{ notification }}</div>
    <button mat-button (click)="remove(notification)" >
      X
    </button>
  </div>
</ng-container>
<br />
<br />
<button (click)="add()">Add notification</button>

Working example: https://stackblitz.com/edit/angular-animation-fade-in-jcx9bu?file=app/app.component.html

Though I don't understand why you would want to invent a wheel if you're already using material components. I would advise using material snackbar.