{"id":16687385,"url":"https://github.com/rodrigokamada/angular-toastr","last_synced_at":"2025-04-10T00:21:15.449Z","repository":{"id":65504177,"uuid":"367414874","full_name":"rodrigokamada/angular-toastr","owner":"rodrigokamada","description":"Application example built with Angular 15 and adding the notification component using the ngx-toastr library.","archived":false,"fork":false,"pushed_at":"2023-08-13T14:49:01.000Z","size":7483,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T14:38:10.161Z","etag":null,"topics":["angular","dev-community","frontend","gh-pages","hacktoberfest","notification","toastr","travis-ci","webdev"],"latest_commit_sha":null,"homepage":"https://rodrigokamada.github.io/angular-toastr/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rodrigokamada.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"rodrigokamada"}},"created_at":"2021-05-14T16:05:09.000Z","updated_at":"2023-09-10T15:21:30.000Z","dependencies_parsed_at":"2023-02-14T16:30:50.931Z","dependency_job_id":null,"html_url":"https://github.com/rodrigokamada/angular-toastr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-toastr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-toastr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-toastr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-toastr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodrigokamada","download_url":"https://codeload.github.com/rodrigokamada/angular-toastr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248132099,"owners_count":21052972,"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":["angular","dev-community","frontend","gh-pages","hacktoberfest","notification","toastr","travis-ci","webdev"],"created_at":"2024-10-12T15:08:59.954Z","updated_at":"2025-04-10T00:21:15.422Z","avatar_url":"https://github.com/rodrigokamada.png","language":"TypeScript","funding_links":["https://github.com/sponsors/rodrigokamada"],"categories":[],"sub_categories":[],"readme":"# Angular Toastr\n\n\nApplication example built with [Angular](https://angular.io/) 15 and adding the notification component using the [ngx-toastr](https://www.npmjs.com/package/ngx-toastr) library.\n\nThis tutorial was posted on my [blog](https://rodrigo.kamada.com.br/blog/adicionando-o-componente-de-notificacao-em-uma-aplicacao-angular) in portuguese and on the [DEV Community](https://dev.to/rodrigokamada/adding-the-notification-component-to-an-angular-application-28m5) in english.\n\n\n\n[![Website](https://shields.braskam.com/v1/shields?name=website\u0026format=rectangle\u0026size=small\u0026radius=5)](https://rodrigo.kamada.com.br)\n[![LinkedIn](https://shields.braskam.com/v1/shields?name=linkedin\u0026format=rectangle\u0026size=small\u0026radius=5)](https://www.linkedin.com/in/rodrigokamada)\n[![Twitter](https://shields.braskam.com/v1/shields?name=twitter\u0026format=rectangle\u0026size=small\u0026radius=5\u0026socialAccount=rodrigokamada)](https://twitter.com/rodrigokamada)\n[![Instagram](https://shields.braskam.com/v1/shields?name=instagram\u0026format=rectangle\u0026size=small\u0026radius=5)](https://www.instagram.com/rodrigokamada)\n\n\n\n## Prerequisites\n\n\nBefore you start, you need to install and configure the tools:\n\n* [git](https://git-scm.com/)\n* [Node.js and npm](https://nodejs.org/)\n* [Angular CLI](https://angular.io/cli)\n* IDE (e.g. [Visual Studio Code](https://code.visualstudio.com/))\n\n\n\n## Getting started\n\n\n### Create the Angular application\n\n\n**1.** Let's create the application with the Angular base structure using the `@angular/cli` with the route file and the SCSS style format.\n\n```shell\nng new angular-toastr\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]\nCREATE angular-toastr/README.md (1059 bytes)\nCREATE angular-toastr/.editorconfig (274 bytes)\nCREATE angular-toastr/.gitignore (604 bytes)\nCREATE angular-toastr/angular.json (3255 bytes)\nCREATE angular-toastr/package.json (1076 bytes)\nCREATE angular-toastr/tsconfig.json (783 bytes)\nCREATE angular-toastr/.browserslistrc (703 bytes)\nCREATE angular-toastr/karma.conf.js (1431 bytes)\nCREATE angular-toastr/tsconfig.app.json (287 bytes)\nCREATE angular-toastr/tsconfig.spec.json (333 bytes)\nCREATE angular-toastr/src/favicon.ico (948 bytes)\nCREATE angular-toastr/src/index.html (299 bytes)\nCREATE angular-toastr/src/main.ts (372 bytes)\nCREATE angular-toastr/src/polyfills.ts (2820 bytes)\nCREATE angular-toastr/src/styles.scss (80 bytes)\nCREATE angular-toastr/src/test.ts (788 bytes)\nCREATE angular-toastr/src/assets/.gitkeep (0 bytes)\nCREATE angular-toastr/src/environments/environment.prod.ts (51 bytes)\nCREATE angular-toastr/src/environments/environment.ts (658 bytes)\nCREATE angular-toastr/src/app/app-routing.module.ts (245 bytes)\nCREATE angular-toastr/src/app/app.module.ts (393 bytes)\nCREATE angular-toastr/src/app/app.component.scss (0 bytes)\nCREATE angular-toastr/src/app/app.component.html (24617 bytes)\nCREATE angular-toastr/src/app/app.component.spec.ts (1097 bytes)\nCREATE angular-toastr/src/app/app.component.ts (219 bytes)\n✔ Packages installed successfully.\n```\n\n**2.** Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post *[Adding the Bootstrap CSS framework to an Angular application](https://github.com/rodrigokamada/angular-bootstrap)*.\n\n**3.** Install the `ngx-toastr` library.\n\n```shell\nnpm install ngx-toastr\n```\n\n**4.** Configure the `ngx-toastr` library. Change the `angular.json` file and add the `toastr.css` file as below.\n\n```json\n\"styles\": [\n  \"node_modules/bootstrap/scss/bootstrap.scss\",\n  \"node_modules/ngx-toastr/toastr.css\",\n  \"src/styles.scss\"\n],\n```\n\n**5.** Import the `BrowserAnimationsModule` and `ToastrModule` modules. Change the `app.module.ts` file and add the lines as below.\n\n```typescript\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { ToastrModule } from 'ngx-toastr';\n\nimports: [\n  BrowserModule,\n  BrowserAnimationsModule,\n  ToastrModule.forRoot({\n    timeOut: 150000, // 15 seconds\n    closeButton: true,\n    progressBar: true,\n  }),\n  AppRoutingModule,\n],\n```\n\n**6.** Remove the contents of the `AppComponent` class from the `src/app/app.component.ts` file. Import the `ToastrService` service and create the `showSuccess`, `showInfo`, `showWarning` and `showError` methods as below.\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ToastrService } from 'ngx-toastr';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent {\n\n  constructor(private toastrService: ToastrService) {\n  }\n\n  public showSuccess(): void {\n    this.toastrService.success('Message Success!', 'Title Success!');\n  }\n\n  public showInfo(): void {\n    this.toastrService.info('Message Info!', 'Title Info!');\n  }\n\n  public showWarning(): void {\n    this.toastrService.warning('Message Warning!', 'Title Warning!');\n  }\n\n  public showError(): void {\n    this.toastrService.error('Message Error!', 'Title Error!');\n  }\n\n}\n```\n\n**7.** Remove the contents of the `src/app/app.component.html` file. Add the buttons as below.\n\n```html\n\u003cdiv class=\"container-fluid py-3\"\u003e\n  \u003ch1\u003eAngular Toastr\u003c/h1\u003e\n\n  \u003cdiv class=\"d-grid gap-2 col-4 mx-auto\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-sm btn-success\" (click)=\"showSuccess()\"\u003eSuccess\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-sm btn-info\" (click)=\"showInfo()\"\u003eInfo\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-sm btn-warning\" (click)=\"showWarning()\"\u003eWarning\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-sm btn-danger\" (click)=\"showError()\"\u003eError\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**8.** Run the application with the command below.\n\n```shell\nnpm start\n\n\u003e angular-toastr@1.0.0 start\n\u003e ng serve\n\n✔ Browser application bundle generation complete.\n\nInitial Chunk Files | Names         |      Size\nvendor.js           | vendor        |   2.70 MB\nstyles.css          | styles        | 273.40 kB\npolyfills.js        | polyfills     | 128.51 kB\nscripts.js          | scripts       |  76.67 kB\nmain.js             | main          |  12.35 kB\nruntime.js          | runtime       |   6.63 kB\n\n                    | Initial Total |   3.19 MB\n\nBuild at: 2021-08-14T12:47:44.417Z - Hash: f001123d671f4d692c5a - Time: 11454ms\n\n** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n\n\n✔ Compiled successfully.\n```\n\n**9.** Ready! Access the URL `http://localhost:4200/` and check if the application is working. See the application working on [GitHub Pages](https://rodrigokamada.github.io/angular-toastr/) and [Stackblitz](https://stackblitz.com/edit/angular15-toastr).\n\n![Angular Toastr](https://res.cloudinary.com/rodrigokamada/image/upload/v1636895792/Blog/angular-toastr/angular-toastr.png)\n\n\n\n## Cloning the application\n\n**1.** Clone the repository.\n\n```shell\ngit clone git@github.com:rodrigokamada/angular-toastr.git\n```\n\n**2.** Install the dependencies.\n\n```shell\nnpm ci\n```\n\n**3.** Run the application.\n\n```shell\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-toastr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodrigokamada%2Fangular-toastr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-toastr/lists"}