Angular 19 component library for notifications & communication: - ntf-bell: notification bell with badge count and shake animation - ntf-feed / ntf-feed-item: real-time notification feed with grouping - ntf-center: full notification center with category filter tabs - ntf-inbox / ntf-inbox-item: two-column inbox with search and detail - ntf-comment / ntf-thread: comment threads with replies and reactions - ntf-mention-input: text input with @mention autocomplete - ntf-empty-state: empty state placeholder - ntf-item-def: custom template directive for notification items Includes signal-based services, SCSS design tokens with dark mode, utility functions, and full TypeScript type definitions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
26 lines
651 B
TypeScript
26 lines
651 B
TypeScript
import { Directive, TemplateRef, inject } from '@angular/core';
|
|
import type { NtfNotification } from '../../types/notification.types';
|
|
|
|
/** Template context for custom notification item rendering */
|
|
export interface NtfItemDefContext {
|
|
$implicit: NtfNotification;
|
|
notification: NtfNotification;
|
|
index: number;
|
|
isRead: boolean;
|
|
}
|
|
|
|
@Directive({
|
|
selector: 'ng-template[ntfItemDef]',
|
|
standalone: true,
|
|
})
|
|
export class NtfItemDefDirective {
|
|
readonly templateRef = inject(TemplateRef<NtfItemDefContext>);
|
|
|
|
static ngTemplateContextGuard(
|
|
_dir: NtfItemDefDirective,
|
|
ctx: unknown,
|
|
): ctx is NtfItemDefContext {
|
|
return true;
|
|
}
|
|
}
|