### Install ngx-toastr

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Install the ngx-toastr package using npm.

```bash
npm install ngx-toastr --save
```

--------------------------------

### Setup Toastr with provideToastr in Standalone Component

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Use the provideToastr function in the providers array for standalone component setup.

```typescript
import { AppComponent } from './src/app.component';
import { provideToastr } from 'ngx-toastr';

bootstrapApplication(AppComponent, {
  providers: [
    provideToastr(), // Toastr providers
  ]
});
```

--------------------------------

### Setup Without Animations

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

To disable animations, override the default toast component with `ToastNoAnimation` using `ToastNoAnimationModule.forRoot()` in your main module.

```APIDOC
## Setup Without Animations

If you do not want animations you can override the default 
toa st component in the global config to use
`ToastNoAnimation` instead of the default one.

In your main module (ex: `app.module.ts`)

```typescript
import { ToastrModule, ToastNoAnimation, ToastNoAnimationModule } from 'ngx-toastr';

@NgModule({
  imports: [
    // ...
    ToastNoAnimationModule.forRoot(),
  ],
  // ...
})
class AppModule {}
```

That's it! No animations.
```

--------------------------------

### Use ToastrService to Show a Success Toast

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Inject ToastrService and use its methods to display toast notifications. This example shows how to display a success message.

```typescript
import { ToastrService } from 'ngx-toastr';
import { inject } from '@angular/core';

@Component({...})
export class YourComponent {
  toastr = inject(ToastrService);

  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!');
  }
}
```

--------------------------------

### Setup ToastrModule in NgModule

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Integrate ToastrModule into your application's root NgModule for module-based setup.

```typescript
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    ToastrModule.forRoot(), // ToastrModule added
  ],
  bootstrap: [App],
  declarations: [App],
})
class MainModule {}
```

--------------------------------

### Set ToastrService Overlay Container in AppComponent

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

In your AppComponent, use viewChild to get a reference to the ToastContainerDirective and assign it to toastrService.overlayContainer.

```typescript
import { Component, OnInit, viewChild, inject } from '@angular/core';
import { ToastContainerDirective, ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-root',
  template: `
    <h1><a (click)="onClick()">Click</a></h1>
    <div aria-live="polite" toastContainer></div>
  `,
})
export class AppComponent implements OnInit {
  toastContainer = viewChild(ToastContainerDirective, { static: true });
  toastrService = inject(ToastrService);

  ngOnInit() {
    this.toastrService.overlayContainer = this.toastContainer;
  }
  onClick() {
    this.toastrService.success('in div');
  }
}
```

--------------------------------

### Import Toastr CSS

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Import the toastr CSS file into your project. This can be done directly or via SASS imports.

```scss
// regular style toast
@import 'ngx-toastr/toastr';
```

```scss
// bootstrap style toast
// or import a bootstrap 4 alert styled design (SASS ONLY)
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions
@import 'ngx-toastr/toastr-bs4-alert';
```

```scss
// if you'd like to use it without importing all of bootstrap it requires
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// bootstrap 4
@import 'ngx-toastr/toastr-bs4-alert';
// boostrap 5
@import 'ngx-toastr/toastr-bs5-alert';
```

--------------------------------

### Google Analytics Initialization

Source: https://github.com/scttcper/ngx-toastr/blob/master/src/index.html

Initializes Google Analytics for the application. This script should be included in your main HTML file.

```javascript
(function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; ((i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments); }), (i[r].l = 1 * new Date())); ((a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])); a.async = 1; a.src = g; m.parentNode.insertBefore(a, m); })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-84656736-1', 'auto');
ga('send', 'pageview');
```

--------------------------------

### Custom Toast Component

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

You can use a custom toast component by extending `Toast` and providing it in the `ToastrModule.forRoot()` configuration.

```APIDOC
## Using A Custom Toast

Create your toast component extending Toast see the demo's pink toast for an example
https://github.com/scttcper/ngx-toastr/blob/master/src/app/pink.toast.ts

```typescript
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    ToastrModule.forRoot({
      toastComponent: YourToastComponent, // added custom toast!
    }),
  ],
  bootstrap: [App],
  declarations: [App, YourToastComponent], // add!
})
class AppModule {}
```
```

--------------------------------

### Set Global Options with Standalone Components

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Configure global toastr options using provideToastr in standalone applications.

```typescript
import { AppComponent } from './src/app.component';
import { provideToastr } from 'ngx-toastr';

bootstrapApplication(AppComponent, {
  providers: [
    provideToastr({
      timeOut: 10000,
      positionClass: 'toast-bottom-right',
      preventDuplicates: true,
    }), 
  ]
});
```

--------------------------------

### Set Individual Toast Options

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Demonstrates how to override default options for a specific toast. Pass an options object to the toast method.

```typescript
this.toastrService.error('everything is broken', 'Major Error', {
  timeOut: 3000,
});
```

--------------------------------

### SystemJS Configuration for ngx-toastr

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Configure SystemJS to map 'ngx-toastr' to the UMD bundle path in your SystemJS config file.

```javascript
map: {
  'ngx-toastr': 'node_modules/ngx-toastr/bundles/ngx-toastr.umd.min.js',
}
```

--------------------------------

### ToastrService Methods with Individual Options

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

The `success`, `error`, `warning`, and `info` methods of `ToastrService` accept an optional configuration object to override default toast settings. These options allow for fine-grained control over toast behavior, appearance, and lifecycle.

```APIDOC
## ToastrService.success/error/warning/info/show()

### Description
Displays a toast notification with customizable options.

### Method
`ToastrService.(success|error|warning|info|show)(message?, title?, options?)`

### Parameters
#### Options (ToastConfig)
- **toastComponent** (Component) - Optional - Angular component to use for the toast.
- **closeButton** (boolean) - Optional - Show a close button on the toast. Default: `false`.
- **timeOut** (number) - Optional - Duration in milliseconds before the toast is automatically closed. Default: `5000`.
- **extendedTimeOut** (number) - Optional - Additional duration in milliseconds to wait before closing after a user hovers over the toast. Default: `1000`.
- **disableTimeOut** (`boolean | 'timeOut' | 'extendedTimeOut'`) - Optional - Disable `timeOut` and/or `extendedTimeOut`. Can be `true` to disable both, or specify `'timeOut'` or `'extendedTimeOut'` to disable only one. Default: `false`.
- **easing** (string) - Optional - CSS easing function for toast animations. Default: `'ease-in'`.
- **easeTime** (string | number) - Optional - Duration of the easing animation in milliseconds. Default: `300`.
- **enableHtml** (boolean) - Optional - Allow HTML content within the toast message. Default: `false`.
- **newestOnTop** (boolean) - Optional - Place new toasts at the top. Default: `true`.
- **progressBar** (boolean) - Optional - Display a progress bar indicating the remaining time. Default: `false`.
- **progressAnimation** (`'decreasing' | 'increasing'`) - Optional - Animation style for the progress bar. Default: `'decreasing'`.
- **toastClass** (string) - Optional - CSS class(es) to apply to the toast element. Default: `'ngx-toastr'`.
- **positionClass** (string) - Optional - CSS class(es) to position the toast container. Default: `'toast-top-right'`.
- **titleClass** (string) - Optional - CSS class(es) for the toast title. Default: `'toast-title'`.
- **messageClass** (string) - Optional - CSS class(es) for the toast message. Default: `'toast-message'`.
- **tapToDismiss** (boolean) - Optional - Close the toast when clicked. Default: `true`.
- **onActivateTick** (boolean) - Optional - Force change detection when the toast is activated. Default: `false`.

### Request Example
```typescript
this.toastrService.error('everything is broken', 'Major Error', {
  timeOut: 3000,
});
```

### Response
No specific response schema is defined for these methods; they trigger UI notifications.
```

--------------------------------

### Handle Toastr Click Action

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Subscribe to the onTap observable to handle click or tap events on a toast. Use take(1) to ensure the subscription is only active for the first tap.

```typescript
showToaster() {
      this.toastr.success('Hello world!', 'Toastr fun!')
        .onTap
        .pipe(take(1))
        .subscribe(() => this.toasterClickedHandler());
    }

    toasterClickedHandler() {
      console.log('Toastr clicked');
    }
```

--------------------------------

### Conditional Progress Bar

Source: https://github.com/scttcper/ngx-toastr/blob/master/projects/ngx-toastr/src/lib/toastr/base-toast/base-toast.component.html

Includes a placeholder for a progress bar if the 'progressBar' option is enabled.

```html
@if (\_options.progressBar) {

}
```

--------------------------------

### Configure ToastrModule for Inline Toasts

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Set up the ToastrModule to use inline toast positioning by setting positionClass to 'inline'.

```typescript
import { NgModule } from '@angular/core';
import { ToastrModule, ToastContainerDirective } from 'ngx-toastr';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    ToastrModule.forRoot({ positionClass: 'inline' }),
    ToastContainerDirective,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

--------------------------------

### Global Options Configuration

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Global options for ngx-toastr can be set using `ToastrModule.forRoot()` or `provideToastr()` for both module-based and standalone Angular applications.

```APIDOC
#### Setting Global Options

Pass values to `ToastrModule.forRoot()` or `provideToastr()` to set global options.

- Module based

```typescript
// root app NgModule
imports: [
  ToastrModule.forRoot({
    timeOut: 10000,
    positionClass: 'toast-bottom-right',
    preventDuplicates: true,
  }),
],
```

- Standalone

```typescript
import { AppComponent } from './src/app.component';
import { provideToastr } from 'ngx-toastr';

bootstrapApplication(AppComponent, {
  providers: [
    provideToastr({
      timeOut: 10000,
      positionClass: 'toast-bottom-right',
      preventDuplicates: true,
    }), 
  ]
});
```
```

--------------------------------

### Configure Custom Toast Component

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Set the toastComponent option in ToastrModule.forRoot() to your custom toast component class.

```typescript
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    ToastrModule.forRoot({
      toastComponent: YourToastComponent, // added custom toast!
    }),
  ],
  bootstrap: [App],
  declarations: [App, YourToastComponent], // add!
})
class AppModule {}
```

--------------------------------

### ToastrService Methods

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Provides methods to manage toasts. `clear()` can remove all toasts or a single toast by its ID. `remove()` specifically removes and destroys a single toast by its ID.

```APIDOC
## Functions

##### Clear

Remove all or a single toast by optional id

```ts
toastrService.clear(toastId?: number);
```

##### Remove

Remove and destroy a single toast by id

```ts
toastrService.remove(toastId: number);
```
```

--------------------------------

### Customize Toast Class

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Add multiple CSS classes to the toastClass option, separated by a space, to customize styling without overriding default styles.

```typescript
toastClass: 'yourclass ngx-toastr'
```

--------------------------------

### Global Options Configuration

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Global options can be set to affect all toast notifications displayed by the service. These options include settings for managing multiple toasts, preventing duplicates, and customizing icon classes.

```APIDOC
## Global Options

### Description
Configures default settings for all toast notifications and provides additional management options.

### Options
- **maxOpened** (number) - Optional - Maximum number of toasts to display simultaneously. If 0, there is no limit. Toasts exceeding this limit will be queued. Default: `0`.
- **autoDismiss** (boolean) - Optional - Automatically dismiss the current toast when the `maxOpened` limit is reached. Default: `false`.
- **iconClasses** (object) - Optional - An object mapping toast types to their respective CSS classes.
  - **error** (string) - Default: `'toast-error'`.
  - **info** (string) - Default: `'toast-info'`.
  - **success** (string) - Default: `'toast-success'`.
  - **warning** (string) - Default: `'toast-warning'`.
- **preventDuplicates** (boolean) - Optional - Prevent displaying duplicate toast messages. Default: `false`.
- **countDuplicates** (boolean) - Optional - Display a counter for duplicate messages. Requires `preventDuplicates` to be `true`. Default: `false`.
- **resetTimeoutOnDuplicate** (boolean) - Optional - Reset the `timeOut` timer when a duplicate toast is detected. Requires `preventDuplicates` to be `true`. Default: `false`.
- **includeTitleDuplicates** (boolean) - Optional - Consider the toast title when checking for duplicates. If `false`, only the message is compared. Requires `preventDuplicates` to be `true`. Default: `false`.

### Icon Classes Defaults
```typescript
iconClasses = {
  error: 'toast-error',
  info: 'toast-info',
  success: 'toast-success',
  warning: 'toast-warning',
};
```
```

--------------------------------

### Default Icon Classes

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Shows the default icon classes used by the ngx-toastr service for different toast types. These can be customized in global options.

```typescript
iconClasses = {
  error: 'toast-error',
  info: 'toast-info',
  success: 'toast-success',
  warning: 'toast-warning',
};
```

--------------------------------

### Set Global Options with Module-Based Imports

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Configure global toastr options when importing ToastrModule in your root NgModule.

```typescript
// root app NgModule
imports: [
  ToastrModule.forRoot({
    timeOut: 10000,
    positionClass: 'toast-bottom-right',
    preventDuplicates: true,
  }),
],
```

--------------------------------

### Custom Toast Container

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Toasts can be placed in a specific div within your application by using the `ToastContainerDirective`. Ensure the container has `aria-live="polite"` for screen reader accessibility.

```APIDOC
### Put toasts in your own container

Put toasts in a specific div inside your application. This should probably be
somewhere that doesn't get deleted. Add `ToastContainerDirective` to the ngModule
where you need the directive available. Make sure that your container has
an `aria-live="polite"` attribute, so that any time a toast is injected into
the container it is announced by screen readers.

```typescript
import { NgModule } from '@angular/core';
import { ToastrModule, ToastContainerDirective } from 'ngx-toastr';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    ToastrModule.forRoot({ positionClass: 'inline' }),
    ToastContainerDirective,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

Add a div with `toastContainer` directive on it.

```typescript
import { Component, OnInit, viewChild, inject } from '@angular/core';
import { ToastContainerDirective, ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-root',
  template: `
    <h1><a (click)="onClick()">Click</a></h1>
    <div aria-live="polite" toastContainer></div>
  `,
})
export class AppComponent implements OnInit {
  toastContainer = viewChild(ToastContainerDirective, { static: true });
  toastrService = inject(ToastrService);

  ngOnInit() {
    this.toastrService.overlayContainer = this.toastContainer;
  }
  onClick() {
    this.toastrService.success('in div');
  }
}
```
```

--------------------------------

### Disable Animations with ToastNoAnimationModule

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Import ToastNoAnimationModule.forRoot() in your main module to disable toast animations.

```typescript
import { ToastrModule, ToastNoAnimation, ToastNoAnimationModule } from 'ngx-toastr';

@NgModule({
  imports: [
    // ...
    ToastNoAnimationModule.forRoot(),
  ],
  // ...
})
class AppModule {}
```

--------------------------------

### Add Toastr CSS to angular.json

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Configure your angular.json file to include the ngx-toastr CSS.

```json
"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]
```

--------------------------------

### Conditional Message Display

Source: https://github.com/scttcper/ngx-toastr/blob/master/projects/ngx-toastr/src/lib/toastr/base-toast/base-toast.component.html

Displays the toast message. Supports rendering raw text or HTML content based on the 'enableHtml' option.

```html
@if (message()) {
  @if (\_options.enableHtml) {

  }
  @else {

{{ message() }}

  }
}
```

--------------------------------

### ActiveToast Interface Definition

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Defines the structure of an active toast, including its ID, content, references, and observable events.

```typescript
export interface ActiveToast {
  /** Your Toast ID. Use this to close it individually */
  toastId: number;
  /** the title of your toast. Stored to prevent duplicates if includeTitleDuplicates set */
  title: string;
  /** the message of your toast. Stored to prevent duplicates */
  message: string;
  /** a reference to the component see portal.ts */
  portal: ComponentRef<any>;
  /** a reference to your toast */
  toastRef: ToastRef<any>;
  /** triggered when toast is active */
  onShown: Observable<any>;
  /** triggered when toast is destroyed */
  onHidden: Observable<any>;
  /** triggered on toast click */
  onTap: Observable<any>;
  /** available for your use in custom toast */
  onAction: Observable<any>;
}
```

--------------------------------

### Conditional Close Button

Source: https://github.com/scttcper/ngx-toastr/blob/master/projects/ngx-toastr/src/lib/toastr/base-toast/base-toast.component.html

Renders a close button (×) if the 'closeButton' option is enabled.

```html
@let \_options = options(); @if (\_options.closeButton) { × }
```

--------------------------------

### Conditional Title Display

Source: https://github.com/scttcper/ngx-toastr/blob/master/projects/ngx-toastr/src/lib/toastr/base-toast/base-toast.component.html

Displays the toast title if a title is provided. Includes a count for duplicate toasts if applicable.

```html
@if (title()) {

{{ title() }} @if (duplicatesCount) { [{{ duplicatesCount + 1 }}] }

}
```

--------------------------------

### Disable Timeouts Configuration

Source: https://github.com/scttcper/ngx-toastr/blob/master/src/app/home/home.component.html

Set `disableTimeOut` to true to prevent toasts from automatically dismissing. Use `timeOut` or `extendedTimeOut` to control dismissal duration when `disableTimeOut` is false.

```typescript
disableTimeOut = true
```

```typescript
disableTimeOut = false
```

```typescript
timeOut only
```

```typescript
extendedTimeOut only
```

--------------------------------

### Clear All or Single Toast

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Use the clear method on the toastrService to remove all toasts or a specific toast by its ID.

```typescript
toastrService.clear(toastId?: number);
```

--------------------------------

### Remove Single Toast

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Use the remove method on the toastrService to remove and destroy a specific toast by its ID.

```typescript
toastrService.remove(toastId: number);
```

--------------------------------

### Handle ExpressionChangedAfterItHasBeenCheckedError

Source: https://github.com/scttcper/ngx-toastr/blob/master/README.md

Wrap toastr calls in setTimeout when opening a toast inside an Angular lifecycle hook to avoid ExpressionChangedAfterItHasBeenCheckedError.

```typescript
ngOnInit() {
    setTimeout(() => this.toastr.success('sup'))
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.