[javascript] Toastr와 함께 사용하는 Angular

20 Dec 2023

javascript

개요

이 블로그 포스트에서는 Toastr 라이브러리를 사용하여 Angular 프레임워크에서 알림 메시지를 구현하는 방법에 대해 다룹니다.

Toastr 라이브러리란?

Toastr는 경고, 성공, 정보, 오류 등의 다양한 유형의 알림을 표시하는 간단하고 유연한 JavaScript 알림 라이브러리입니다.

Angular에 Toastr 통합하기

먼저, Toastr 라이브러리를 설치합니다.

npm install ngx-toastr

그런 다음, app.module.ts 파일에서 Toastr 모듈을 가져와 imports 배열에 추가합니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ToastrModule } from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Toastr 서비스 사용

이제 Toastr 서비스를 컴포넌트에서 사용하여 알림 메시지를 표시할 수 있습니다. 예를 들어, 다음은 Toastr 라이브러리를 사용하여 성공 알림을 표시하는 방법입니다.

import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('설정이 저장되었습니다.', '성공');
  }
}

결론

Toastr 라이브러리를 사용하여 Angular 애플리케이션에서 알림 메시지를 표시하는 방법을 살펴보았습니다. 이를 통해 사용자에게 중요한 정보를 시각적으로 전달할 수 있습니다.

더 많은 Toastr 사용법과 옵션에 대한 자세한 내용은 공식 문서를 참조하세요.

이제 Toastr를 통해 Angular에서 간편하게 알림 메시지를 구현할 수 있습니다!