GITHUB : https://github.com/tigersarang/AngularToastr

유튜브 : https://youtu.be/zY9cWuFXDIY

1. 패키지 설치

   npm install ngx-toastr @angular/animations

2. angular.json에 styles 추가

"styles": [

  "node_modules/ngx-toastr/toastr.css",

  "src/styles.css"

],

3. app.config.ts에 provider 추가 

import { provideToastr } from 'ngx-toastr';

export const appConfig: ApplicationConfig = {

  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),

    provideAnimations(),

    provideToastr(

      {

        positionClass: 'toast-bottom-right',

        timeOut: 5000,

        closeButton: true

      }

    )

  ],

};

4. 컴포넌트에서 사용하기.

import { Component, inject, OnInit } from '@angular/core';

import { RouterOutlet } from '@angular/router';

import { ToastrService } from 'ngx-toastr';

@Component({

  selector: 'app-root',

  imports: [RouterOutlet],

  templateUrl: './app.component.html',

  styleUrl: './app.component.css'

})

export class AppComponent implements OnInit {

  ngOnInit(): void {

    this.toastr.success('Toastr is working!');

  }

  title = 'ToastrTest';

  private toastr = inject(ToastrService);

}