Alert

Alerts are banners that draw the user's attention to important messages. Visual elements such as icons and colors indicate the type and urgency of the information being communicated. Use alerts to provide critical information that requires immediate user attention within the current context. For complex HTML content, the component provides an ng-content projection slot for custom content injection.

Examples

Example 1: Display API Error Response

When displaying error responses from APIs, use the error input to pass error details. The alert displays the error message from the message property of the response error object if available. Otherwise, it falls back to displaying the message from the HttpErrorResponse object.

angular http error response

import {AlertComponent} from 'clr-lift';

@Component({
  imports: [AlertComponent],
  template: `
    <!-- error is instance of HttpErrorResponse -->
    <cll-alert [error]="error" />
  `
})
export class AlertExampleComponent {
  error = new HttpErrorResponse({
    error: {message: 'Error message'},
  });
}

Example 2: Display Custom Content

The content is rendered using innerHTML, allowing you to include HTML tags. This is particularly useful when working with translation strings that contain HTML markup, enabling rich text formatting and structured content in alerts.

I'm a successful content

I'm a info content

I'm a warning content

I'm a danger content

Hello world, I like clr-lift!

import {AlertComponent} from 'clr-lift';

@Component({
  imports: [AlertComponent],
  template: `
    <cll-alert alertType="success" content="I'm a successful content" />
    <cll-alert alertType="info" content="I'm a info content" />
    <cll-alert alertType="warning" content="I'm a warning content" />
    <cll-alert alertType="danger" content="I'm a danger content" />

    <!-- Pass HTML tags -->
    <cll-alert alertType="info" [content]="'<strong>Hello world</strong>, I like clr-lift!'" />
  `
})
export class AlertContentExampleComponent { }

Example 3: Content Projection

The alert component also supports content projection via ng-content, enabling the inclusion of complex HTML structures and Angular components.

Multiple errors are listed as below by content projection.

Cannot read undefined.
Cannot upload a object.

import {AlertComponent} from 'clr-lift';

@Component({
  imports: [AlertComponent],
  template: `
    <cll-alert>
      <p class="!mt-0 !mb-2">Multiple errors are listed as below by <strong>content projection</strong>.</p>
      <ol class="list-decimal">
        <li>Cannot read undefined.</li>
        <li>
          Cannot upload a object.
          <button
            [cllTooltip]="'server is down'"
            [cllTooltipPosition]="'tooltip-right'"
            class="btn btn-sm btn-link btn-icon !my-0 !px-0"
            aria-label="info"
            type="button"
          >
            <clr-icon shape="info-circle" />
          </button>
        </li>
      </ol>
    </cll-alert>
  `
})
export class AlertProjectionExampleComponent { }

Example 4: Small Alert

Use the isSmall input to display a compact-sized alert:

I'm a small alert

import {AlertComponent} from 'clr-lift';

@Component({
  imports: [AlertComponent],
  template: `
    <cll-alert alertType="danger" content="I'm a small alert" [isSmall]="true" />
  `
})
export class SmallAlertExampleComponent { }

Example 5: Lightweight Alerts

Use lightweight alerts inside containers, other components and layouts:

angular http error response

I'm a successful content

I'm a info content

I'm a warning content

I'm a neutral content

I'm a loading content

I'm a unknown content

import {AlertComponent} from 'clr-lift';

@Component({
  imports: [AlertComponent],
  template: `
    <cll-alert [isLightweight]="true" [error]="error" />
    <cll-alert [isLightweight]="true" alertType="success" content="I'm a successful content" />
    <cll-alert [isLightweight]="true" alertType="info" content="I'm a info content" />
    <cll-alert [isLightweight]="true" alertType="warning" content="I'm a warning content" />
    <cll-alert [isLightweight]="true" alertType="neutral" content="I'm a neutral content" />
    <cll-alert [isLightweight]="true" alertType="loading" content="I'm a loading content" />
    <cll-alert [isLightweight]="true" alertType="unknown" content="I'm a unknown content" />
  `
})
export class LightweightAlertExampleComponent { }

Example 6: App-Level Alerts

Use app-level alerts in the global context of an application. Place them at the top of all content and navigation:

angular http error response

I'm a successful content passed into content property View

I'm a successful content injected by content projection View

I'm a info content

I'm a warning content

import {AlertComponent} from 'clr-lift';

@Component({
  imports: [AlertComponent],
  template: `
    <cll-alert [error]="error" [isAppLevel]="true" />
    <cll-alert
      alertType="success"
      content="I'm a successful content <a href='javascript:void(0)' class='btn btn-outline btn-sm'>View</a>"
      [isAppLevel]="true"
    />
    <cll-alert alertType="success" [isAppLevel]="true">
      I'm a successful content injected by content projection &nbsp;
      <a href="javascript:void(0)" class="btn btn-inverse btn-sm">View</a>
    </cll-alert>
    <cll-alert alertType="info" content="I'm a info content" [isAppLevel]="true" />
    <cll-alert alertType="warning" content="I'm a warning content" [isAppLevel]="true" />
  `
})
export class AppLevelAlertExampleComponent { }

API Reference

AlertComponent

Alert component that displays important messages to users with various types and styles.

Inputs

alertType: (Optional) One of "info", "warning", "success", "danger", "neutral", "loading", or "unknown". Defaults to "danger".
isAppLevel: (Optional) Boolean flag for app-level alerts. Defaults to false. Set to true to display an app-level alert.
isSmall: (Optional) Boolean flag for compact sizing. Defaults to false.
isLightweight: (Optional) Boolean flag for lightweight styling. Defaults to false. Set to true to display a lightweight alert.
error: (Optional) An HttpErrorResponse object to display error information.
content: (Optional) A string containing the alert message content. Supports HTML tags via innerHTML.

Content Projection

The component supports ng-content projection for complex HTML structures and Angular components.