Cook your Toast with Cook-Toast - ANGULAR 5

Note - For Angular 4 please reffer to this Cook-Toast-NG4

Installation -

   npm install cook-toast-ng5 --save   

Where its need ?

• To give the indication to the user what the next step is.
• To give warning to user like Please Not try this Again.
• If I want to show the Success response on the UI.
• If I want to show the Failure response on UI.

How to use ?

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-ng5';
  @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 Type

of TOAST you can use to make the user indications what to do NEXT.

 import { KitchenService } from 'cook-toast-ng5';
 
 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 id="toast" *cook-toast="5; left:true; top:true;"></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 postions ->

  • top:true;left:true

  • top:true;right:true

  • bottom:true;left:true

  • bottom:true;right:true

RUN-TIME Positions -

If you want to provide RUN-TIME Positions for your Cook-Toast

then just insert the object of postions like this -

    
    this.kitchenService.cook('Hey I am your Toast', 'i', {
        right: true,
        bottom: true
    });

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

Want to make Slide Animation in Toast? -

If you want to slide your Toast to the to the Vertical Sides,

just make the fourth Parameter true while you cook your toast

in RUNTIME and you can also use in your HTML Parameters.

• For Runtime Slide Animation -

    
    this.kitchenService.cook('Hey I am your Toast', 'i', {
        right: true,
        bottom: true
    }, true);

• For HTML Slide Animation

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

Contributions are Most Welcome.

Hope you Like it !