Notification Center
oge-notification-center is a bell with the unread count and a panel of notifications.
Notifications list newest first, by day (Today / Yesterday / Earlier), by group or in one list, with an All / Unread switch, read / unread and dismiss per item and mark all as read. The list is a WAI-ARIA feed — Page Down and Page Up move between items — and scrolling to its end asks for older notifications. New unread ones are announced politely.
feed unread grouping infinite scroll
Notification center
Open the bell: three unread notifications today, two read ones yesterday, and three more pages of older reports that load as you scroll (or press Page Down onto the last item). “Simulate a new notification” adds one, announced and counted on the bell.
items hasMore loadMore readChange
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeNotificationCenter } from '@oge-ui/overlay';
import type { OgeNotification } from '@oge-ui/overlay';
@Component({
selector: 'demo-root',
imports: [OgeNotificationCenter],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- The bell shows the unread count; the panel is a feed (Page Down /
Page Up between items). Scrolling to the end asks for older ones. -->
<oge-notification-center
[(items)]="items"
[hasMore]="page() < 3"
[loading]="loading()"
(loadMore)="loadOlder()"
(readChange)="saveRead($event.item.id, $event.read)"
/>
<button type="button" (click)="arrive()">Simulate a new notification</button>
`,
})
export class Demo {
protected readonly items = signal<readonly OgeNotification[]>([
{ id: 'n1', title: 'Build passed', time: Date.now() - 120_000, severity: 'success' },
{ id: 'n2', title: 'Invoice #1042 paid', time: Date.now() - 90_000_000, read: true },
]);
protected readonly page = signal(0);
protected readonly loading = signal(false);
protected loadOlder(): void {
this.loading.set(true);
// fetch the next page from your API, then append it
setTimeout(() => {
const page = this.page();
const older = Array.from({ length: 5 }, (_, i) => ({
id: `old-${page}-${i}`,
title: 'Weekly report is ready',
time: Date.now() - (3 + page * 5 + i) * 86_400_000,
read: true,
}));
this.items.update((items) => [...items, ...older]);
this.page.set(page + 1);
this.loading.set(false);
}, 400);
}
protected arrive(): void {
this.items.update((items) => [
{ id: crypto.randomUUID(), title: 'New order received', time: Date.now() },
...items,
]);
}
protected saveRead(id: string, read: boolean): void {
// persist the read state on your server
}
}