DEV Community

Juraj Chovan
Juraj Chovan

Posted on

V Ionic (ver.5) pridať toast alert informovanie

V Ionic (ver.5) aplikácii je vhodné pridať funkcionalitu zobrazovania tzv.toast-u (ti.krátkodobo zobrazenej informácie o tom, že sa vykonala/vykonáva nejaká akcia).
Pre toto si v aplikácii vytvorím samostatný servis "alert", príkazom:

ionic generate service services/alert
Enter fullscreen mode Exit fullscreen mode

vo vytvorenom súbore "alert.service.ts" doplniť kód:

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

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

  constructor(
    private toastController: ToastController
  ) { }
  // zobrazenie toast informacnyho alert-u:
  async presentToast(message: any) {
    const toast = await this.toastController.create({
      message: message,
      duration: 2000,
      position: 'bottom',
      color: 'success'
    });
    toast.present();
  }

}
Enter fullscreen mode Exit fullscreen mode

Úlohou tohto servisu bude zobraziť "toast" s požadovaným textom/informáciou.
A teraz na stránke, kde vykonávam nejakú operáciu a chcem tam zobraziť tento toast/alert, napr.v súbore "mytags.page.ts" doplniť takýto kód:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';
import { NavController } from '@ionic/angular';
import { AlertService } from '../../services/alert.service';

@Component({
  selector: 'app-mytags',
  templateUrl: './mytags.page.html',
  styleUrls: ['./mytags.page.scss'],
})

export class MytagsPage implements OnInit {
  pageContent = null;
  constructor(
    private api: ApiService,
    private navCtrl: NavController,
    private alertService: AlertService
  ) { }
        ...
  ngOnInit() {
    // ToDo: ID prihlaseneho user-a:
    const loggedUserID = 3;
    this.api.getUserTags(loggedUserID).subscribe((response) => {
      console.log(response);
      this.pageContent = response;
    });
  }

  // naspat na predchadzajucu stranku:
  previousPage()  {
    this.navCtrl.back();
  }
  // zmaze vybraty tag:
  deleteTag(TagID)  {
    // ToDo: ID prihlaseneho user-a:
    const loggedUserID = 3;
    this.api.deleteTag(TagID).subscribe((response) => {
      console.log('tag ID: '+TagID);
      this.pageContent = response;
      console.log(response);
      this.alertService.presentToast('tag (ID: '+TagID+') successfully deleted');
      // a znovu nacitaj/refreshni stranku:
      this.ngOnInit();
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

tj.je tu pridaná referencia na tento servis, a pri vykonávaní funkcie "deleteTag()" sa volá zobrazenie toast-u (alertu) v ktorom bude informácia (že sa tag s daným ID úspešne vymazal).
...

Top comments (0)