Angular Toast IONIC토스트 활용 예시

ng generate service toast

1. 토스트 서비스 생성

 

 

 

import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { Color } from '@ionic/core';

@Injectable({
  providedIn: 'root',
})
export class ToastService {
  constructor(private readonly toastController: ToastController) {}

  async show(message: string, color: Color) {
    if (await this.toastController.getTop()) {
      this.toastController.dismiss();
    }

    const toast = await this.toastController.create({
      message,
      color,
      duration: 3000,
      mode: 'ios',
      buttons: [{ text: '확인' }],
    });

    toast.present();
  }
}

2. 기본 구조 및 생상 텍스트 구성

 

 

 

import { ToastService } from 'src/app/services/toast.service';

 constructor(
    private toastService: ToastService,
  ) {}
  
  
  
  
 create() {
    this.toastService.show('답변이 등록되었습니다.', 'success');
  }

3. 호출 컴포넌트 예시 success 는 미리 설정한 색상 값입니다.