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.

Usage

Basic Usage

1. Import AlertContainerComponent and include <cll-alert-container> above the Clarity header tag within the main container.
2. Import AlertService and utilize its addAlert(), deleteAlert(), or clearAlerts() methods for effective management of alerts.

<clr-main-container>
  <cll-alert-container />
  <clr-header></clr-header>
</clr-main-container>

To incorporate alerts into your code, employ the provided code structure. 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.

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();
}

Advanced Usage

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.

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!');
}

Interactive UI