๐Ÿž Angular Toast Service with Bootstrap

March 3, 2024 ยท View on GitHub

GitHub CI Quality Gate Status codecov FOSSA Status

Angular TypeScript RxJS Bootstrap Vercel

About the project

The idea of the project was to create a service that allows displaying different types of toast notifications to the user, e.g. success or error toasts.

The application consists of essentially three components: A toast component that represents a single toast notification, a toaster component that maintains and stacks all current toasts, and the toast service. How the solution was built and works in detail is also explained in the following Medium post:

How to Create a Toast Service Using Angular 14 and Bootstrap 5

Getting started

To get the toast service up and runnning locally, all you need to do is open the repository with VS Code and install all the recommended extensions.

Run

  • npm install to install all required dependencies

Development Server

Run

  • npm start for a local dev server. Navigate to http://localhost:4200/.

Linter and Prettier

Run

  • npm run lint to check for ESLint issues
  • npm run lint:fix to automatically fix ESLint issues
  • npm run prettier to check for Prettier issues
  • npm run prettier:fix to automatically fix Prettier issues

Unit Tests

Run

  • npm run test to execute the unit tests in watch mode for development
  • npm run test:coverage to execute all unit tests with code coverage

Build

Run

  • npm run build to run the production build