[javascript] SweetAlert와 Angular 연동 방법

24 Nov 2023

javascript

SweetAlert는 사용자에게 가독성이 높은 경고 메시지를 제공하는 JavaScript 플러그인입니다. Angular 프레임워크와 함께 사용하면 사용자 인터페이스를 개선하고 사용자와의 상호 작용을 향상시킬 수 있습니다. 이제 SweetAlert를 Angular에 연동하는 방법을 알아보겠습니다.

1. SweetAlert 설치

먼저 SweetAlert를 설치합니다. 프로젝트 폴더에서 터미널을 열고 다음 명령어를 실행합니다:

npm install sweetalert2

2. SweetAlert 서비스 생성

Angular에서 SweetAlert를 사용하기 위해 서비스를 생성해야 합니다. 프로젝트 폴더에서 다음 명령어를 실행하여 SweetAlert 서비스를 생성합니다:

ng generate service sweetalert

3. SweetAlert 서비스 구현

생성된 SweetAlert 서비스 파일(sweetalert.service.ts)을 열고 다음 내용을 추가합니다:

import { Injectable } from '@angular/core';
import Swal from 'sweetalert2';

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

  successAlert(message) {
    Swal.fire('Success', message, 'success');
  }

  errorAlert(message) {
    Swal.fire('Error', message, 'error');
  }

  // 추가적인 SweetAlert 메서드 정의

}

위 예제에서는 successAlert와 errorAlert 메서드만 구현했습니다. 필요한 경우 추가적인 SweetAlert 메서드를 정의할 수 있습니다.

4. SweetAlert 서비스 사용

SweetAlert 서비스를 사용하기 위해 컴포넌트에서 해당 서비스를 주입해야 합니다.

컴포넌트 파일을 열고 다음과 같이 SweetAlert 서비스를 주입합니다:

import { Component } from '@angular/core';
import { SweetAlertService } from '../sweetalert.service';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="showSuccessAlert()">Success</button>
    <button (click)="showErrorAlert()">Error</button>
  `
})
export class ExampleComponent {

  constructor(private sweetAlertService: SweetAlertService) { }

  showSuccessAlert() {
    this.sweetAlertService.successAlert('Success message');
  }

  showErrorAlert() {
    this.sweetAlertService.errorAlert('Error message');
  }

}

위 예제에서는 버튼을 클릭할 때 SweetAlert 서비스를 사용하여 알림창을 표시합니다.

결론

이제 SweetAlert를 Angular 프로젝트에서 사용할 수 있습니다. SweetAlert 서비스를 통해 Angular 컴포넌트에서 SweetAlert 경고 메시지를 간편하게 표시할 수 있습니다.

더 자세한 내용은 SweetAlert 문서를 참조하시기 바랍니다.