How to get started easily with Syncfusion Angular 11 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 11 application and how to enable its commonly used features.

Prerequisites 

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

• Node.js
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Installation and application creation

1. Install Angular cli 11 using following command.

npm install -g @angular/cli@11.2.3

Note:

If you would like to follow and run the application in Angular6 or Angular5 or Angular4, you need to replace the CLI command version number with the corresponding angular version number. 

npm install -g @angular/cli@<CLI VERSION>

2. Create an Angular 11 application using Angular CLI.

ng new angular11-app
cd angular11-app

3. Serve the Angular 11 application using following command

ng serve --open 

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

Integration of Angular Toast:

1. After running the Angular 11 application successfully, configure the Angular Toast in this application. Install Angular Toast and EJ2 package using following command.

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

     The --save command will instruct the NPM to include a notifications package inside the dependencies section of the package.json.

2. 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 { }

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

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

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

<ejs-toast></ejs-toast> 

5. 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');

      }

}

6. 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:

Conclusion

I hope you enjoyed learning about how to get started with Angular 11 Toast.

You can refer to our Angular Toast tour page to know about its other groundbreaking feature representations 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, BoldDesk Support, or feedback portal. We are always happy to assist you!