Error Summary for Angular

import { AuiErrorSummary } from '@absoluteui/angular/error-summary';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Error Summary page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { errorSummary: { ... } } }) (see Configuration).

Example

import { Component, viewChild } from '@angular/core';
import { AuiErrorSummary } from '@absoluteui/angular/error-summary';
import { AuiButton } from '@absoluteui/angular/button';

@Component({
  selector: 'app-booking-errors',
  imports: [AuiErrorSummary, AuiButton],
  template: `
    <aui-error-summary title="The booking was not saved" [headingLevel]="2"></aui-error-summary>
    <button type="button" auiButton variant="primary" (click)="showServerError()">Save booking</button>`,
})
export class BookingErrorsComponent {
  private readonly summary = viewChild.required(AuiErrorSummary);

  showServerError(): void {
    this.summary().show([{ message: 'The service is busy. Try again in a few minutes.' }]);
  }
}

<aui-error-summary>

Class AuiErrorSummary; template reference #ref="auiErrorSummary".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
title	string		Heading text. Default: localized “There is a problem”.
description	string		Optional text under the heading.
icons	Partial<ErrorSummaryIcons>		Heading icon override.
headingLevel	HeadingLevel	'2'	Native heading element level.
focusOnShow	boolean	true	Move focus to the summary when show() displays items. show(items, { focus }) overrides it per call.
locale	string	'en-US'	Locale of the default heading.

Outputs

Output	Payload	Description
(navigate)	ErrorSummaryNavigateDetail	A summary link was activated and focus moved to its target. Re-emits aui-navigate.

Read-only state

Property	Type	Description
isVisible	Signal<boolean>	True while items are shown.

Methods

Call them through a viewChild query or a template reference.

Method	Description
show(items: readonly ErrorSummaryItem[], options?: { focus?: boolean; } | undefined): void	Replace the items and show the summary (an empty list hides it). Focuses and scrolls to the summary unless focus is false or focusOnShow is false. Throws on an empty message before changing anything.
clear(): void	Remove all items and hide the summary without moving focus.