{"id":21231639,"url":"https://github.com/piyalidas10/angular-alert-box","last_synced_at":"2026-04-18T10:35:50.437Z","repository":{"id":41668552,"uuid":"256671603","full_name":"piyalidas10/Angular-Alert-Box","owner":"piyalidas10","description":"Alert message box using Angular 6","archived":false,"fork":false,"pushed_at":"2023-01-07T17:13:15.000Z","size":3826,"stargazers_count":2,"open_issues_count":24,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T02:32:53.971Z","etag":null,"topics":["alert","alert-messages","angular","angular-alert","component","message","message-box","message-service","typescript"],"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/piyalidas10.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":"2020-04-18T04:46:52.000Z","updated_at":"2023-07-27T10:55:15.000Z","dependencies_parsed_at":"2023-02-07T17:46:45.024Z","dependency_job_id":null,"html_url":"https://github.com/piyalidas10/Angular-Alert-Box","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piyalidas10/Angular-Alert-Box","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Alert-Box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Alert-Box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Alert-Box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Alert-Box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/Angular-Alert-Box/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Alert-Box/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265205686,"owners_count":23727511,"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":["alert","alert-messages","angular","angular-alert","component","message","message-box","message-service","typescript"],"created_at":"2024-11-20T23:47:45.907Z","updated_at":"2025-10-07T16:50:22.326Z","avatar_url":"https://github.com/piyalidas10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Run Application\n```\nng serve\nlocalhost:4200/\n```\n\n![Alert-Message-Box](alert-box.png)\n\n# Alert Component Template\nPath: /app/shared/alert.component.html\nThe alert component template contains the html for displaying alert messages at the top of the page.\n\n```\n\u003cdiv *ngIf=\"alertMsg \u0026\u0026 alertMsg.text !== undefined\"\n[ngClass]=\"{ 'alert': alertMsg, 'alert-success': alertMsg.type === 'success', 'alert-danger': alertMsg.type === 'error' }\"\u003e\n\u003ci *ngIf=\"alertMsg.type === 'error'\" class=\"fa fa-times-circle\" aria-hidden=\"true\"\u003e\u003c/i\u003e\n\u003ci *ngIf=\"alertMsg.type === 'success'\" class=\"fa fa-check-circle\" aria-hidden=\"true\"\u003e\u003c/i\u003e\n{{alertMsg.text}}\u003c/div\u003e\n```\n\n# App component\nThe app component passes alert messages to the template whenever a message is received from the message service. It does this by subscribing to the message service's getMessage() method which returns an Observable.\n\n```\nshowAlert() {\n    this.msgService.getMessage().subscribe(message =\u003e {\n      this.alertMsg = message;\n      console.log('showMsgAlert =\u003e ', this.alertMsg);\n    });\n  }\n```\n\n  # Message service\n\nThe message service enables any component in the application to display alert messages at the top of the page via the app component.\n\nIt has methods for displaying success and error messages, and a getMessage() method that returns an Observable that is used by the app component to subscribe to notifications for whenever a message should be displayed.\n\n```\nimport { Injectable } from '@angular/core';\nimport { Router, NavigationStart } from '@angular/router';\nimport { Observable, Subject, BehaviorSubject } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class MessageService {\n  messages: string[] = [];\n  private alertmsg = new BehaviorSubject\u003cany\u003e({});\n  private keepAfterNavigationChange = false;\n\n  constructor(private router: Router) {\n    // clear alert message on route change\n    router.events.subscribe(event =\u003e {\n        if (event instanceof NavigationStart) {\n            if (this.keepAfterNavigationChange) {\n                // only keep for a single location change\n                this.keepAfterNavigationChange = false;\n            } else {\n                // clear alert\n                this.alertmsg.next({});\n            }\n        }\n    });\n  }\n\n  success(message: string, keepAfterNavigationChange = false) {\n    this.keepAfterNavigationChange = keepAfterNavigationChange;\n    this.alertmsg.next({ type: 'success', text: message });\n    console.log('message service success =\u003e ', keepAfterNavigationChange);\n  }\n\n  error(message: string, keepAfterNavigationChange = false) {\n      this.keepAfterNavigationChange = keepAfterNavigationChange;\n      this.alertmsg.next({ type: 'error', text: message });\n      console.log('message service error =\u003e ', this.keepAfterNavigationChange, message);\n  }\n\n  getMessage() {\n      return this.alertmsg.asObservable();\n  }\n\n}\n```\n\n# Success component\nSend sucess message to success method of the message service\n\n```\nthis.msgService.success('sucessfully completed', true);\n```\n\n\n# Error component\nSend error message to error method of the message service\n\n```\nthis.msgService.error('errors occured', true);\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fangular-alert-box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Fangular-alert-box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fangular-alert-box/lists"}