DEV Community

Juraj Chovan
Juraj Chovan

Posted on

2 1

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).
...

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)