Display a div only for few seconds in Angular

I want to display a notification on angular app only for few seconds, the event is triggered after clicking a button.

how about this:

html

<button (click)="showDiv()">Click</button>
<div *ngIf="!hideDivFlg">My Div</div>

.ts

showDiv() {
    this.hideDivFlg = false;
    setTimeout(() => {
      this.hideDivFlg = true;
    }, 4000);
}

There is a npm package for toast messages:
https://www.npmjs.com/package/ngx-toastr

npm install ngx-toastr --save
please check the angular version for compatibility

npm install @angular/animations --save

app.module.ts

import { ToastrModule } from 'ngx-toastr';
...
imports: [
...
ToastrModule.forRoot(),
...]

styles.css

@import '~ngx-toastr/toastr';

angular.json

 "styles": [
             ...
              "node_modules/ngx-toastr/toastr.css"
            ],

create a new service

common.service.ts

import { Injectable } from '@angular/core';
import { IndividualConfig, ToastrService } from 'ngx-toastr';

export interface toastPayload {
  message: string;
  title: string;
  ic: IndividualConfig;
  type: string;
}

@Injectable({
  providedIn: 'root'
})
export class CommonService {

  constructor(
    private toastr: ToastrService
  ) { }

  showToast(toast: toastPayload) {
    this.toastr.show(
      toast.message,
      toast.title,
      toast.ic,
      'toast-' + toast.type
    );
  }
}

Finally use it in your component:

items-component.ts

import { CommonService, toastPayload } from 'src/app/services/common.service';

export class ItemsComponent implements OnInit {
  toast!: toastPayload;
constructor(private cs: CommonService,)

}

displayToast(){
    this.toast = {
      message: 'A cool Message',
      title: 'A cool Title',
      type: "success",
      ic: {
        timeOut: 2500,
        closeButton: true,
      } as IndividualConfig,
    };
   this.cs.showToast(this.toast);
}