{"id":16759048,"url":"https://github.com/hardeep-bit/cook-toast","last_synced_at":"2025-04-10T17:14:20.025Z","repository":{"id":57206982,"uuid":"109228498","full_name":"hardeep-bit/cook-toast","owner":"hardeep-bit","description":"Toaster - An Indication for User What to do NEXT or What NOT to do or Any Error or Any Successful Message ","archived":false,"fork":false,"pushed_at":"2018-02-21T10:04:01.000Z","size":30,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T15:01:40.992Z","etag":null,"topics":["cook","cook-toast","position","slide-animation","toast"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hardeep-bit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-02T06:53:58.000Z","updated_at":"2019-07-03T20:24:26.000Z","dependencies_parsed_at":"2022-09-08T14:22:34.397Z","dependency_job_id":null,"html_url":"https://github.com/hardeep-bit/cook-toast","commit_stats":null,"previous_names":["hardy12994/toast","hardeep-bit/cook-toast"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardeep-bit%2Fcook-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardeep-bit%2Fcook-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardeep-bit%2Fcook-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardeep-bit%2Fcook-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hardeep-bit","download_url":"https://codeload.github.com/hardeep-bit/cook-toast/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248261916,"owners_count":21074225,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cook","cook-toast","position","slide-animation","toast"],"created_at":"2024-10-13T04:07:06.469Z","updated_at":"2025-04-10T17:14:19.996Z","avatar_url":"https://github.com/hardeep-bit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Cook your Toast with Cook-Toast\r\n\r\n#### Note - **For Angular 5 please reffer to this [**Cook-Toast-NG5**](https://www.npmjs.com/package/cook-toast-ng5)**\r\n\r\n![WARN](http://res.cloudinary.com/dkws91cqo/image/upload/v1510679477/warn_nnsjyl.png)    ![FAIL](http://res.cloudinary.com/dkws91cqo/image/upload/v1510679476/fail_rksmcp.png)\r\n\r\n![INFO](http://res.cloudinary.com/dkws91cqo/image/upload/v1510679477/Info_vryarw.png)    ![SUCCESS](http://res.cloudinary.com/dkws91cqo/image/upload/v1510679477/success_upvnia.png)\r\n\r\n#### Installation -\r\n\r\n```\r\nnpm install cook-toast --save\r\n```\r\n\r\n### Where its need ?\r\n\r\n- To give the indication to the user what the next step is.\r\n- To give warning to user like Please Not try this Again. \r\n- If I want to show the Success response on the UI.\r\n- If I want to show the Failure response on UI.\r\n\r\n### How to use ?\r\n\r\n Import the *`CookToastModule`* in your main NgModule of your application\r\n \r\n and insert this module in your imports array of NgModule.\r\n\r\n\r\n ```\r\n   //main module\r\n   \r\n   import { CookToastModule } from 'cook-toast';\r\n   @NgModule({\r\n       imports :[\r\n           CookToastModule\r\n       ]\r\n   })\r\n\r\n ``` \r\n\r\nNow Import the *`KitchenService`* in your Component to make use of it in HTML's\r\n\r\nDon't forget to Inject it in your component Constructor.  \r\n\r\nSo yeah !!! you are the point to use your TOAST. Their are Four Type \r\n\r\nof TOAST you can use to make the user indications what to do NEXT.\r\n\r\n\r\n```sh\r\n import { KitchenService } from 'cook-toast';\r\n \r\n class MyToastComponent {\r\n     constructor(private kitchenService: KitchenService){\r\n             this.kitchenService.cook('Hey I am your Toast', 's');  \r\n             this.kitchenService.cook('Hey I am your Toast', 'f');  \r\n             this.kitchenService.cook('Hey I am your Toast', 'w');  \r\n             this.kitchenService.cook('Hey I am your Toast', 'i');  \r\n     }\r\n }\r\n\r\n```\r\n\r\nWhich for which ?\r\n\r\n- s is for **SUCCESS**. ![SUCCESS](http://res.cloudinary.com/dkws91cqo/image/upload/v1510679477/success_upvnia.png)\r\n\r\n- f is for **FAILURE**. ![FAIL](http://res.cloudinary.com/dkws91cqo/image/upload/v1510679476/fail_rksmcp.png)\r\n\r\n- w is for **WARNING**. ![WARN](http://res.cloudinary.com/dkws91cqo/image/upload/v1510679477/warn_nnsjyl.png)\r\n\r\n- i is for **INFORMATION**. ![INFO](http://res.cloudinary.com/dkws91cqo/image/upload/v1510679477/Info_vryarw.png)\r\n\r\n\r\nNow How it should be set in HTML ?\r\n\r\n```sh\r\n    \u003cspan id=\"toast\" *cook-toast=\"5; left:true; top:true;\"\u003e\u003c/span\u003e\r\n```\r\n\r\nSo here - \r\n- `cook-toast` is the your Directive Name.\r\n- Ist Param `5` is Stay Time on Screen. It is in Seconds.\r\n- IInd and IIIrd Param are for Position of your toast. So, just set `true` for two positions.\r\n- These are the possible postions -\u003e\r\n  \r\n  - `top:true;left:true` \r\n\r\n  - `top:true;right:true`\r\n\r\n  - `bottom:true;left:true`\r\n   \r\n  - `bottom:true;right:true` \r\n\r\n\r\n### RUN-TIME Positions -\r\n\r\nIf you want to provide **RUN-TIME Positions** for your Cook-Toast\r\n\r\nthen just insert the object of postions like this -\r\n\r\n```sh\r\n    \r\n    this.kitchenService.cook('Hey I am your Toast', 'i', {\r\n        right: true,\r\n        bottom: true\r\n    });\r\n\r\n```\r\n\r\n\r\n**NOTE** - \r\n  If you Don't Set the Position of your TOAST it will comming to\r\n  By default **LEFT-TOP**.\r\n\r\n\r\n\r\n### Want to make Slide Animation in Toast? -\r\n\r\nIf you want to slide your Toast to the to the Vertical Sides,\r\n\r\njust make the fourth Parameter `true` while you cook your toast \r\n\r\nin RUNTIME and you can also use in your HTML Parameters.\r\n\r\n- For Runtime **Slide Animation** -\r\n\r\n```sh\r\n    \r\n    this.kitchenService.cook('Hey I am your Toast', 'i', {\r\n        right: true,\r\n        bottom: true\r\n    }, true);\r\n\r\n```\r\n\r\n- For HTML **Slide Animation**\r\n\r\n```sh\r\n    \u003cspan id=\"toast\" *cook-toast=\"5; left:true; top:true; slide:true;\"\u003e\u003c/span\u003e\r\n```\r\n\r\n\r\n\r\n\r\n\r\n##### Contributions are Most Welcome.\r\n\r\n##### Hope you Like it !","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhardeep-bit%2Fcook-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhardeep-bit%2Fcook-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhardeep-bit%2Fcook-toast/lists"}