How to get started with Syncfusion Angular 7 Toast notification?

The Essential JS 2 Angular Toast is small and nonblocking pop-up. A small toast message is shown to users at the bottom of the screen or at a specific target and disappears automatically after a few seconds (time-out). In this knowledge base, we are going to provide details about how to easily integrate Syncfusion Angular Toast in Angular 7 application and how to enable its commonly used features.

Prerequisites

Before start, we need following items to create Angular Toast in Angular 7 application

• Node.js (latest version)
• Angular
• Angular CLI
• Visual studio code for editor.

Installation and application creation

• Install Angular cli 7 using following command.

  npm install -g @angular/cli@7.0.5
  

• Create an Angular 7 application using Angular cli.

        ng new angular7-app
        cd angular7-app
  

• Serve the Angular 7 application using following command

         ng serve
  

Listen the application in localhost:4200. Your application will serve in browser. Refer the below example screenshot for Angular 7 version.

Integration of Angular Toast

• After running the Angular 7 application successfully, configure the Angular Toast in this application. Install Angular Toast and EJ2 package using following command. The --save command will instruct the NPM to include a notifications package inside the dependencies section of the package.json.

             npm install @syncfusion/ej2-angular-notifications --save 
             npm install @syncfusion/ej2 --save 
  

• Import Toast from installed package in app/app.module.ts.

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { ToastModule } from '@syncfusion/ej2-angular-notifications';
  import { AppComponent } from './app.component';
   
   
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      ToastModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { } 
  

• You should refer the CSS file for Angular Toast in style.CSS     

  @import "../node_modules/@syncfusion/ej2/material.css";
  

• Add the Angular Toast component in app.component.html.

             <ejs-toast></ejs-toast >
  

• Now, render the toast component as like below.

  <div id=”defaultToast”>
  <ejs-toast #defaultToast id='defaulttoast' [position]="position" (created)="onCreate()"  (close)="onClose($event)" icon="e-meeting">
        <ng-template #content>
            <div>Conference Room 01 / Building 135 10:00 AM-10:30 AM</div>
         </ng-template>
          <ng-template #title>
             <div>Adaptive Tiles Meeting</div>
         </ng-template>            
   </ejs-toast>
  <button ejs-button #toastBtnShow class="e-btn" id="toastBtnShow" (click)='showToast($event)'>Show Toasts</button>
   <button ejs-button #toastBtnHide class="e-btn" id="toastBtnHide" (click)='hideToast($event)'>Hide Toast</button>
  <div>
  

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    @ViewChild('defaultToast')
     public toastObj: ToastComponent;
    @ViewChild('toastBtnShow')
     public buttonEleShow: ElementRef;
     public position: Object = { X: "Right" };
 
      public onCreate: EmitType<Object> = () => {
          setTimeout(()=>{
           this.toastObj.show();
           },200);
       }
    public showToast: EmitType<Object> = (e: Object) => {
           this.toastObj.show();
    }
     public hideToast: EmitType<Object> = (e: Object) => {
           this.toastObj.hide('All');
      }
}

• Now serve the application using following command.

   ng serve --open
  

Once all the files are compiled successfully. It will serve the site at localhost:4200

The following screenshot illustrates this.

Summary

In this GitHub repository, the application prepared from the above steps has been committed, and it is readily runnable. Also, you can check our Angular Toast features from this page.

If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!