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 -> hasnanivishal@gmail.com

Commands

npm login
npm publish --access public
npm dist-tag add ang-alert-bar@1.0.2 ng17

Migrations

Nx and Angular Versions

commands

npx nx migrate 20.5.0
npx nx migrate --run-migrations