So Hi everyone hope you good there !

Today this Blog is mainly for Front-End Developers on WEB, who are basically working on Angular 2 or Angular 4 or their can newly launched Angular 5.

So the Problem face by the users while using the web applications like they are not aware that how this application works, what would be the next step for them or we can say they don’t know what to do after this click .

I don’t know about all the users but I feel that developers should provide the indications to the users that what NEXT STEP is, in highlighted manner so that user does’t make mistakes or follow the path towards the next step instead of learning that how this application works.

So Here I Represent the Cook-Toast -

What this Cook-Toast provides is giving the indications to the user that You have Successfully Submitted the form or Your Picture is Uploaded or It’s Your Last Warning or Whoop’s Something Went Wrong . These kind of simple messages can be the Indications for user when they are show in attractive manner.

This can be use by installing it by NPM -

npm install cook-toast — save

what to do is Just Import the CookToastModule in your main NgModule of

your application and Insert this module in your imports array of NgModule.

//main module

import { CookToastModule } from 'cook-toast';
imports :[

Now Import the KitchenService in your Component to make use of it in HTML's

Don’t forget to Inject it in your component Constructor.

So yeah !!! you are the point to use your TOAST. Their are Four Types of TOAST which can Cooked here ;) . You can use to make the user indications what to do NEXT.

Take a Component -

import { KitchenService } from 'cook-toast';class MyToastComponent {     constructor(private kitchenService: KitchenService){        this.kitchenService.cook('Hey I am your Toast', 's');        this.kitchenService.cook('Hey I am your Toast', 'f');        this.kitchenService.cook('Hey I am your Toast', 'w');        this.kitchenService.cook('Hey I am your Toast', 'i');      }}

Which for which ?

  • s is for SUCCESS.
  • f is for FAILURE.
  • w is for WARNING.
  • i is for INFORMATION.

Now How it should be set in HTML ?

<span *cook-toast="5; left:true; top:true;" id="toast"></span>

So here -

  • cook-toast is the your Directive Name.
  • Ist Param 5 is Stay Time on Screen. It is in Seconds.
  • IInd and IIIrd Param are for Position of your toast. So, just set true for two positions.

These are the possible positions -

  • top:true;left:true
  • top:true;right:true
  • bottom:true;left:true
  • bottom:true;right:true

NOTE — If you Don’t Set the Position of your TOAST it will comming to By default LEFT-TOP.

Here are the links for NPM GIT-HUB

If their is something wrong Please mention in Comments.

Hope you Like it :)

Please Clap !! So That Others Can See This !




Founder and C.E.O at | Want to help world to grow 🌱

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Paytm Software Engineer — I (Backend) Experienced (0–1) years Interview experience

How did I get here? And why mobile development?

Write maintainable feature tests in Rails with page objects


How I got Officelovin’ to the TOP 5 on ProductHunt

Explore LocalStack

Multilingual real-time chat with AWS Translate & React

Setting up your AWS Account, the right way

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hardeep Singh

Hardeep Singh

Founder and C.E.O at | Want to help world to grow 🌱

More from Medium

Angular Best Practices: Accelerate Your Angular App

Angular Best Practices

Angular Vs React Vs Vue

Sharing Code Between Web and Hybrid Mobile Applications (Part 1) — Ionic and Angular

Server-Side Events as Simple Alternative to WebSockets