Session Warning Dialog for Angular

import { AuiSessionWarningDialog } from '@absoluteui/angular/session-warning-dialog';

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

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

Example

import { Component, signal } from '@angular/core';
import { instant, type Instant } from '@absoluteui/core';
import { AuiSessionWarningDialog } from '@absoluteui/angular/session-warning-dialog';
import { AuiButton } from '@absoluteui/angular/button';

@Component({
  selector: 'app-session',
  imports: [AuiSessionWarningDialog, AuiButton],
  template: `
    <aui-session-warning-dialog [open]="warn()" [expiresAt]="expiresAt()"
                 (extended)="extend()" (signedOut)="signOut()" (closed)="warn.set(false)">
      <p>Unsaved changes are kept.</p>
    </aui-session-warning-dialog>
    <button type="button" auiButton (click)="warn.set(true)">Show the warning</button>
  `,
})
export class SessionComponent {
  readonly warn = signal(false);
  readonly expiresAt = signal<Instant>(instant(Date.now() + 15 * 60_000));
  extend(): void {
    this.expiresAt.set(instant(Date.now() + 15 * 60_000));
  }
  signOut(): void {
    location.assign('/sign-out');
  }
}

<aui-session-warning-dialog>

Class AuiSessionWarningDialog; template reference #ref="auiSessionWarningDialog".

AbsoluteUI Session Warning Dialog; projected content is added below the countdown: <aui-session-warning-dialog [expiresAt]="deadline()" [(open)]="warn" (extended)="extend()">...</aui-session-warning-dialog>. With warnBefore it opens itself; open follows it either way.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
expiresAt	Instant		Required. When the session ends.
warnBefore	Duration		Open automatically this long before expiresAt (at least 20 s).
title	string		Default: localized “Your session is about to expire”.
message	string		Default: localized inactivity message.
extendLabel	string		Default: localized “Stay signed in”.
signOutLabel	string		Default: localized “Sign out”.
expiredTitle	string		Default: localized “Your session has expired”.
expiredMessage	string		Default: localized “You have been signed out. Sign in again to continue.”
signInLabel	string		The single action after expiry. Default: localized “Sign in again”.
announceInterval	number	'60'	Announce the remaining time each time it crosses a multiple of this many seconds (15..3600), and at 60, 30, and 10 seconds.
escapeExtends	boolean	true	Escape means “Stay signed in”; when false, Escape does nothing.
locale	string	'en-US'	Message and unit-formatting locale.

Two-way bindings

Model	Type	Change output	Description
[(open)]	boolean	(openChange)	Whether the warning dialog is shown: [(open)]. Closing by Escape, the close button, or an action sets it to false.

Outputs

Output	Payload	Description
(opened)	null	The dialog opened (from Dialog). Re-emits aui-open.
(closed)	DialogCloseDetail	The dialog closed (from Dialog). Re-emits aui-close.
(extended)	SessionWarningExtendDetail	The user chose to stay signed in: extend the session, then call update({ expiresAt }). Re-emits aui-extend.
(signedOut)	SessionWarningSignOutDetail	The user chose to sign out, or acknowledged expiry (“Sign in again”). Re-emits aui-sign-out.
(expired)	null	The deadline passed (once per deadline, open or closed). Re-emits aui-expire.