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

Why You Need an ERP — Scenario 1

Menghubungkan Realtime Database / Firestore pada Android (Kotlin/Java) dan write database sederhana

Basic Concepts of SQL — Amateur Guide

When Do You Know If It Is Time To Refactor

(Re)Imagining Disaster

I Attended a Coding Bootcamp — Now What ?

Hack The Box: Lame

Dota 2 System Requirements

Dota 2 System Requirements

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

await for Observables

Angular Best Practices: Accelerate Your Angular App

Angular Best Practices

how to consume API in angular

Indexing Typescript Todo Entities with Lunr