Angular Alert Bar

• Display contextual messages (success, info, warning, error) with clean, accessible styles that match modern web apps.
• Just plug-and-play with simple Angular inputs—customize appearance, overflow, and alert variants (filled, outlined, text) to suit your needs.
• Includes SVG icons, full ARIA support, theming options, and responsive design for consistent user feedback across all devices.
• Works seamlessly in any Angular project (standalone or monorepo) with minimal dependencies.

Examples/Demo

Live Demo Example

Severities

Paginated

Filled

Outlined

Custom Template

Installation

npm i ang-alert-bar

API

import { AngAlertBarComponent } from 'ang-alert-bar' selector: alert-bar

@Inputs()

| Input | Type | Required | Description | | -------------------- | -------------------- | ------------------------ | -------------------------------------------- | | messages | AlertMessage[] | YES | array of AlertMessage | | paginated | boolean | Optional, default: false | enable pagination | | truncateTextOverflow | boolean | Optional, default: true | message will be truncated to fit in one line | | variant | AlertMessageVariants | Optional, default: Text | variant style - Text, Filled or Outlined | | severityIcon | boolean | Optional, default: true | show severity icon | | closeIcon | boolean | Optional, default: true | show close icon |

@Outputs()

| Input | Type | Description | | ---------- | ------------ | -------------- | | closeEvent | AlertMessage | event on close |

Types

1. Model - AlertMessage

alertType: AlertMessageTypes;
alertMessage: string | TemplateRef<any>;

2. Enum - AlertMessageVariants

  Text,
  Outlined,
  Filled,

3. Enum - AlertMessageTypes

  Success,
  Info,
  Warning,
  Error,

Usage

Use of component via selector 'ang-alert-bar'.

@Component({
  imports: [AngAlertBarComponent],
  selector: "app-root",
  template: `
    <alert-bar
      [messages]="messages1"
      [paginated]="paginated"
      [truncateTextOverflow]="truncateTextOverflow"
      [variant]="variant"
      [closeIcon]="closeIcon"
      [severityIcon]="severityIcon"
      (closeEvent)="onCloseEvent($event)"
    />

    <h3>Custom Template Example</h3>

    <alert-bar [messages]="message2" severityIcon closeIcon />

    <ng-template #customTpl let-data>
      <div class="content">
        <div class="title">Merged pull request</div>
        <div class="description">
          Pull request #41 merged after a successful build
        </div>
        <div class="actions">
          <a>View commit</a>
          <a>Dismiss</a>
        </div>
      </div>
    </ng-template>
  `,
  styleUrl: "app.component.scss",
})
export class AppComponent implements OnInit {
  customTpl = viewChild.required<TemplateRef<any>>("customTpl");

  messages1: AlertMessage[] = [
    {
      alertType: AlertMessageTypes.Info,
      alertMessage: "Please read the comments carefully",
    },
    {
      alertType: AlertMessageTypes.Success,
      alertMessage: "Your message has been sent successfully",
    },
    {
      alertType: AlertMessageTypes.Warning,
      alertMessage: "There was a problem with your network connection",
    },
    {
      alertType: AlertMessageTypes.Error,
      alertMessage: "A problem occurred while submitting your data",
    },
  ];

  message2: AlertMessage[] = [];

  AlertMessageVariants = AlertMessageVariants;
  truncateTextOverflow = true;
  paginated = false;
  severityIcon = true;
  closeIcon = true;
  variant: AlertMessageVariants = AlertMessageVariants.Text;

  ngOnInit() {
    this.message2 = [
      {
        alertType: AlertMessageTypes.Success,
        alertMessage: this.customTpl(),
      },
    ];
  }

  onCloseEvent(message: AlertMessage) {
    this.messages1 = this.messages1.filter((x) => x != message);
  }
}

License

MIT © lahsiv

Thanks for Installing

Contact me for any suggestion/issues -> [email protected]