Multi Alerts

Frequently, there is a need to showcase multiple alerts, particularly those at the application level positioned at the top. The clr-lift offers two highly beneficial components for this purpose: AlertContainerComponent and AlertService. The service provides methods to add, delete, and clear alerts programmatically.

Examples

Example 1: Setup Alert Container

Import AlertContainerComponent and include <cll-alert-container> above the Clarity header tag within the main container.

import {AlertContainerComponent} from 'clr-lift';
import {Component} from '@angular/core';

@Component({
  imports: [AlertContainerComponent],
  template: `
    <clr-main-container>
      <cll-alert-container />
      <clr-header></clr-header>
      <!-- rest of your app -->
    </clr-main-container>
  `
})
export class AppComponent {}

Example 2: Basic Usage

Import AlertService and utilize its addAlert(), deleteAlert(), or clearAlerts() methods for effective management of alerts. The addAlert function takes an object as its parameter, with the content field being mandatory and representing the alert content in string format. Additionally, you have the option to include other properties, such as alertType, to specify the type of alert, and indicate whether it is an application-level alert through isAppLevel. The default value for isAppLevel is true, as in most cases, you would prefer to display multiple alerts at the application level.

import {AlertService} from 'clr-lift';
import {Component, inject} from '@angular/core';

@Component({})
export class AlertExampleComponent {
  private alertService = inject(AlertService);

  addAppLevelAlert() {
    // You can pass 'danger', 'info', 'success', 'warning' for the alertType.
    this.alertService.addAlert({
      content: 'New app-level alert added.',
      alertType: 'success',
    });
  }

  addStandardAlert() {
    this.alertService.addAlert({
      content: 'New standard alert added.',
      alertType: 'success',
      isAppLevel: false,
    });
  }

  clearAlerts() {
    this.alertService.clearAlerts();
  }
}

Example 3: Advanced Usage with Interactive Elements

In certain scenarios, you may want to include a button or link within an alert's content. To handle button clicks or navigate to an internal route through link clicks, you can use the onTargetClick and targetSelector properties. The targetSelector represents the selector of the clickable element (ID, class, etc.), and the onTargetClick specifies the function to be executed upon clicking the element.

import {AlertService} from 'clr-lift';
import {Component, inject} from '@angular/core';

@Component({})
export class AlertAdvancedExampleComponent {
  private alertService = inject(AlertService);

  addAlertWithButton() {
    this.alertService.addAlert({
      content: 'Alert with a button. <button type="button" class="btn btn-sm btn-outline" id="click-target">Click Me</button>',
      alertType: 'info',
      targetSelector: '#click-target',
      onTargetClick: this.clickMe,
    });
  }

  clickMe() {
    alert('You did it correctly!');
  }
}

Example 4: Interactive Demo

Try adding and clearing alerts using the buttons below:

Alert with a button.

I am an info alert. You can delete this alert by clicking the close button.

warning alert! You can delete this alert by clicking the close button.

This is a danger alert! You can delete this alert by clicking the close button.

API Reference

AlertService

Service for managing multiple alerts programmatically.

Methods

addAlert(options: AlertOptions): void
Adds a new alert with the specified options.
deleteAlert(id: string): void
Deletes an alert by its ID.
clearAlerts(): void
Clears all alerts.

AlertOptions Interface

content: string
(Required) The alert content in string format. Can include HTML.
alertType?: 'danger' | 'info' | 'success' | 'warning'
(Optional) The type of alert. Defaults to 'info'.
isAppLevel?: boolean
(Optional) Whether this is an application-level alert. Defaults to true.
targetSelector?: string
(Optional) The selector (ID, class, etc.) of a clickable element within the alert content.
onTargetClick?: () => void
(Optional) Function to be executed when the element specified by targetSelector is clicked.

AlertContainerComponent

Container component that displays all alerts. Should be placed above the Clarity header tag within the main container.