diff --git a/app/src/pages/component-tree.ts b/app/src/pages/component-tree.ts index 0f4c851..6aa148c 100644 --- a/app/src/pages/component-tree.ts +++ b/app/src/pages/component-tree.ts @@ -21,8 +21,8 @@ interface SourceComponent { inputs: string[]; outputs: string[]; isStandalone: boolean; + changeDetection?: 'OnPush' | 'Eager' | 'unknown'; } - interface LiveNode { id: string; name: string; @@ -474,6 +474,10 @@ function bare(name: string): string {
app-stat-card has a required input, optional inputs, a two way bound model and
an output. [appHighlight] is an attribute directive with its own input, output
- and host bindings.
+ and host bindings. app-eager-clock opts out of the default strategy with
+ changeDetection: Eager.
app-stat-card to see its inputs and outputs listed from source.
@@ -27,6 +29,8 @@ import { StatCard } from './stat-card';
The model is {{ detailed() ? 'open' : 'closed' }}, and the output has fired {{ refreshes() }} time(s). diff --git a/src/app/examples/eager-clock.ts b/src/app/examples/eager-clock.ts new file mode 100644 index 0000000..9bfc4e0 --- /dev/null +++ b/src/app/examples/eager-clock.ts @@ -0,0 +1,35 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + DestroyRef, + inject, +} from '@angular/core'; + +// Eager on purpose: ticks is a plain field, so OnPush would never see it change. +@Component({ + selector: 'app-eager-clock', + changeDetection: ChangeDetectionStrategy.Eager, + template: `
+ Eager tick {{ ticks }} +
`, + styles: ` + .ticks { + margin: 0; + font-variant-numeric: tabular-nums; + color: var(--muted); + } + `, +}) +export class EagerClock { + private readonly cdr = inject(ChangeDetectorRef); + protected ticks = 0; + + constructor() { + const id = setInterval(() => { + this.ticks++; + this.cdr.markForCheck(); + }, 1000); + inject(DestroyRef).onDestroy(() => clearInterval(id)); + } +}