How to use Toast as an Angular service?

You can create the Angular Toast component as an Angular service component. The service is a stateless object that contains public functions and maintains the data throughout the life of an application. These functions can be invoked from any Angular component like Controllers, Directives, and more. 

The service will reduce the code when rendering the same Toast component each time in a different component page. You can create the Toast component as a separate service using ‘@Injectable()’.

The following steps explain how to use the Toast component as a separate Angular service:

Step #1:

Create a separate toast.ts service file using @Injectable and provide a service name as ‘ToastService’.  Toast component provides the following methods to define the Angular service:

createToast è creates and returns the toast component. 

showToast/hideToast è shows or hides the toast component using show/hide public method. 

hideToastAll è hides all the Toast components. 

You can access these methods within the angular application when required.

toast.ts

import { Injectable } from '@angular/core';
import { Toast, ToastModel } from '@syncfusion/ej2-notifications';  // Import the toast component
 
@Injectable()
 
export class ToastService {
  public toastInstance: Toast;
  constructor() {}
  
  // To create the toast component
  createToast: Function = (element: HTMLElement, model: ToastModel): Toast => {
    if (!element.classList.contains('e-toast')) {
      this.toastInstance = new Toast(model, element);
    }
    return this.toastInstance
  };
 
  // To show the toast component
  showToast: Function = (elemnet: HTMLElement, model: ToastModel) => {
    this.toastInstance = this.createToast(elemnet, model);
    this.toastInstance.show();
  }
 
  // To hide the toast component
  hideToast: Function = () => {
    if (this.toastInstance) {
      this.toastInstance.hide();
    }
  }
 
  // To hide the all toast component
  hideToastAll: Function = () => {
    if (this.toastInstance) {
      this.toastInstance.hide('All');
    }
  }
}
 

Step #2:

You can inject the service using one of the following options:

Option #1: Global service

You can inject the service into a root module by specifying providers into @NgModule.

app.module.ts

 
import { ToastService } from './toast.service/toast';
 
@NgModule({
  providers: [ToastService]
})
 

Option #2: Local service

You can inject the service into a component directly by specifying providers into @Component.

app.component.ts

 
import { ToastService } from './toast.service/toast';
 
@Component({
  providers: [ToastService]
})
 

Step #3:

You can call the showToast method by clicking the show toast button and the hideToast method is called by clicking the hide toast button using Toast service.  You can use the Toast services in the component by the following ways:  

app.component.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { ToastService, showToast } from './toast.service/toast';
 
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild("toast") toast: ElementRef;
  constructor(private toastService: ToastService) {
  }
 
  showBtnClick(e) {
    this.toastService.showToast(this.toast.nativeElement, {
      title: 'Toast Sample Header',
      content: 'Toast Content'
    });
  }
 
  hideBtnClick(e) {
    this.toastService.hideToast();;
  }
}
 

app.component.html

<div style="text-align:center">
  <h1>
    Syncfusion Toast Service
  </h1>
 
  <button class="e-btn" (click)="this.showBtnClick($event)">Show-toast</button>
    <button class="e-btn" (click)="this.hideBtnClick($event)">Hide-Toast</button>
 
  <div id="ej2Toast" #toast></div>
</div>
 

Find the Toast component as an Angular service in this sample.

The following screenshot shows the result of the previous code sample.

 Conclusion

I hope you enjoyed learning about how to use Toast as an Angular service.

You can refer to our Angular Toast feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Toast example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!