Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thiagopg84/ngx-french-toast
With ngx-french-toast, you have a lightweight and customizable toast library for your Angular 14+ applications. Show informative toast messages to enhance user experience and provide important feedback or collect data with dynamically imported components.
https://github.com/thiagopg84/ngx-french-toast
angular angular14 made-from-scratch ngx-toast ngx-toastr toast toast-notifications toastr
Last synced: about 2 months ago
JSON representation
With ngx-french-toast, you have a lightweight and customizable toast library for your Angular 14+ applications. Show informative toast messages to enhance user experience and provide important feedback or collect data with dynamically imported components.
- Host: GitHub
- URL: https://github.com/thiagopg84/ngx-french-toast
- Owner: thiagopg84
- License: apache-2.0
- Created: 2023-06-04T23:57:29.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-06-16T18:59:51.000Z (6 months ago)
- Last Synced: 2024-10-10T08:29:23.844Z (2 months ago)
- Topics: angular, angular14, made-from-scratch, ngx-toast, ngx-toastr, toast, toast-notifications, toastr
- Language: TypeScript
- Homepage:
- Size: 461 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-french-toast - A lightweight and customizable toast library for your Angular 14+ applications. Show informative toast messages to enhance user experience and provide important feedback or collect data with dynamically imported components. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-french-toast - A lightweight and customizable toast library for your Angular 14+ applications. Show informative toast messages to enhance user experience and provide important feedback or collect data with dynamically imported components. (Table of contents / Third Party Components)
README
# ngx-french-toast
### Check the Changelog for updates! đ
### You can test all features in ngx-french-toast playground app.
---
# Features
- Fully built in Angular, without any external dependencies. Oui, trÚs indépendant!
- Customizable toast appearance, including duration, colors, and positioning. Like a beret, you can style it to perfection!
- Unique feature: Dynamically embed components within the toast for maximum flexibility and créativité. C'est magnifique!
- Total control over toast visibility: `infinite` and `pinned` properties allow users to arrange toasts based on their importance and ensure critical messages stay in focus.
## Compatibility Matrix
Angular
ngx-french-toast
14^ - 15^
1.3.x
16^
1.4.x
17^
2.x
18^
18.x
# Installation
To install ngx-french-toast, simply follow these Ă©tapes:
### 1. Run the following command to install the package via npm:
```
npm install ngx-french-toast
```
### 2. Import the `FrenchToastModule` in your Angular module:
#### Standard apps
```typescript
import { FrenchToastModule, ToastPosition, ToastConfig } from 'ngx-french-toast';
// optional configuration object:
const config: ToastConfig = {
colors: {
danger: '#a20000', // Background color for the danger toast
dangerText: '#ffffff', // Text color for the danger toast
info: '#2d96f8', // Background color for the info toast
infoText: '#ffffff', // Text color for the info toast
success: '#2df877', // Background color for the success toast
successText: '#ffffff', // Text color for the success toast
warning: '#f8bb2d', // Background color for the warning toast
warningText: '#ffffff', // Text color for the warning toast
timebar: 'linear-gradient(45deg, #2b6bbf, #10425b)', // Or a single color -- background color for the time bar
autoGradient: false, // Controls whether the background will be an automatically generated gradient or not based on single input colors
},
defaultDuration: 100000,
position: ToastPosition.TOP_RIGHT, // As elegant as the Eiffel Tower!
limit: 3,
font: {
contentFontSize: '13px', // This will accept any CSS unit (rem, em, px etc.)
titleFontSize: '15px', // Same here ;)
family: 'Athiti' // TrÚs élégant!
}
};
@NgModule({
imports: [
// ...
FrenchToastModule.forRoot(config)
],
// ...
})
export class AppModule { }
```
#### Standalone apps
```typescript
import { provideFrenchToast, ToastPosition } from 'ngx-french-toast';
bootstrapApplication(AppComponent, {
providers: [
provideFrenchToast({
defaultDuration: 10000,
position: ToastPosition.BOTTOM_RIGHT,
limit: 2,
font: {
contentFontSize: '13px',
titleFontSize: '15px',
family: 'Athiti'
}
})
]
})
.catch((err) => console.error(err));
```
### 3. Et voilĂ ! You're ready to start using ngx-french-toast in your Angular application.
# Usage
Here's a simple example demonstrating how to use ngx-french-toast:
```typescript
import { Component } from '@angular/core';
import { ToastService } from 'ngx-french-toast';
@Component({
selector: 'app-example',
template: `
Show Toast
`
})
export class ExampleComponent {
constructor(private toastService: ToastService) {}
showToast(): void {
this.toastService.success({
title: 'Knock, knock!',
content: 'Who\'s there? Eiffel. Eiffel who? Eiffel in love with you!' // Mon Dieu, l'amour!
});
}
}
```
# Toast Types
ngx-french-toast provides 4 toast types. Each of them has its own method:
- `success()`: Shows a success toast. C'est magnifique!
- `danger()`: Shows a danger toast. Oh lĂ lĂ !
- `info()`: Shows an info toast. VoilĂ !
- `warning()`: Shows a warning toast. Attention!
You can use these methods of your `ToastService` instance to show toasts in your application. For example:
```typescript
this.toastService.success({ title: 'Success', content: 'Your task has been completed with finesse!' });
this.toastService.danger({ title: 'Danger', content: 'Something went wrong! Oh lĂ lĂ !' });
this.toastService.info({ title: 'Info', content: 'Here are some important details for you.' });
this.toastService.warning({ title: 'Warning', content: 'Be cautious! Danger may be lurking nearby.' });
```
# Toast Input Object
Each toast has the following customizable properties:
```typescript
this.toastService.success({
title: 'Toast Title',
content: 'Lorem ipsum dolor sit amet.', // this will be ignored if you're embedding a component ;)
_id: `success-toast--${this.id}`, // if you leave it blank, the ID will be automatically generated
component: SomeComponent,
duration: 10000,
icon: '../assets/svg/sprite.svg#icon-success', // or a URL of a .png, for example
infinite: true, // if infinite is true, the duration will be ignored
pinned: true, // when set to true, this toast will remain fixed in its position even if new toasts are added, unless the next toast is also pinned
context: { // this will be available within SomeComponent!
name: 'Jean Pierre',
email: '[email protected]'
}
});
```
# Embedding Components Dynamically
To embed components dynamically just call any method from your instance of `ToastService` and pass an object with the `component` and `title` properties. For example:
```typescript
this.toastService.success({
component: ExampleComponent,
title: 'Oui, mon ami!',
context: {
name: 'Jean Pierre',
email: '[email protected]'
} // the content and type of context is up to you!
});
```
## Grabbing the `context` object from the embedded component
To have access to the `context` object from within your dynamically embedded component, you just have to create a `context` variable in your embedded component to receive the content you declared when calling the `ToastService`:
```typescript
context: { name: string, email: string }; // the type is up to you :)
```
## Programmatically closing the parent toast from the embedded component
To close the parent toast from the embedded component, users should follow these steps:
### â ïž Attention! This is a breaking change.
~~1. In the embedded component (e.g., `ExampleComponent`), define an `EventEmitter` named `destroyToast` as an `@Output()` property:~~
```diff
- @Output() destroyToast: EventEmitter = new EventEmitter(false);
```
1. In the embedded component (e.g., `ExampleComponent`), inject an instance of `ToastService` and the parent component (`ToastComponent`) as dependencies:
```typescript
import { ToastComponent, ToastService } from 'ngx-french-toast';
constructor(private toastService: ToastService, private toast: ToastComponent) {}
```
2. Call the `destroyToast` method from `ToastService`, passing the parent component as a parameter:
```typescript
closeToast(): void {
this.toastService.destroyToast(this.toast);
}
```
To summarize, here's an example for the whole section:
```typescript
import { Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-example',
template: `
My email: {{ context.email }}
Five stars!;
`
})
export class ExampleComponent {
context: { name: string, email: string };
constructor(private toastService: ToastService, private toast: ToastComponent) {}
rate(rate: number): void {
this.someApi.rate(rate).subscribe({
next: () => {
this.toastService.destroyToast(this.toast);
}
});
}
}
```
Passing the parent component to the `destroyToast` method allows `ToastService` to find the `ToastComponent` within visible toasts and close it. TrĂšs beau!
# Using Icons
You can customize the toast appearance by adding icons. Simply pass an `icon` property inside the config object when calling the toast service. The `icon` property accepts a string that can link directly to images or SVG sprite files. Here are a few examples:
Using an SVG from a sprite:
```typescript
this.toastService.success({ title: 'Success', icon: '../assets/svg/sprite.svg#icon-success' }); // Comme un baguette of success!
```
Using an image:
```typescript
this.toastService.success({ title: 'Success', icon: '../assets/imgs/success.png' }); // C'est magnifique!
```
Note: Make sure to provide the correct path to the image or SVG file. Parfait!
# Clearing Toasts Programmatically
Sometimes, you might need to remove all toasts from the screen at once. To do this programmatically, simply call the `clearAllToasts()` method from your `ToastService` instance:
```typescript
this.toastService.clearAllToasts();
```
This can be particularly useful when, for instance, you want to reset the toast notifications or clear the screen after a certain action has been taken.
# Contributions
Contributions to ngx-french-toast are welcome! If you find a bug, have a feature request, or want to contribute code improvements, please submit an issue, or fork it, or just let me know and we'll figure it out đ
# Contact
If you have any questions, suggestions, or feedback, you can reach out to me via [email protected] or find me on LinkedIn. Don't hesitate to say "Bonjour!" and share your thoughts. Let's connect and make the ngx-french-toast community even stronger! đȘđ„
Made with â€ïž (and lots of croissants) for Angular 
.
Merci beaucoup for using ngx-french-toast! I hope it brings a touch of crĂ©ativitĂ© to your Angular applications. Bon appĂ©tit! đ