Cook your Toast with Cook-Toast

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';
  @NgModule({
      imports :[
          CookToastModule
      ]
  })

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 !