File

libs/upp-wdgt/src/injectables/renderer.ts

Description

Service that optimizes change detection calls by ensuring that detectChanges() is only executed once per execution cycle, even if update() is called multiple times.

This service is useful for preventing unnecessary re-rendering of Angular components, improving performance and efficiency.

// Providing ViewRenderer in a Component
import { Component, ChangeDetectorRef } from '@angular/core';
import { ViewRenderer } from '../services/view-renderer.service';

selector: 'app-example', template: <button (click)="increment()">Increment</button><p>{{ counter }}</p>, providers: [ { provide: ViewRenderer, useFactory: (cdRef: ChangeDetectorRef) => new ViewRenderer(cdRef), deps: [ChangeDetectorRef] } ] }) export class ExampleComponent { counter = 0;

constructor(private renderer: ViewRenderer) {} // Inject ViewRenderer with ChangeDetectorRef

increment() { for (let i = 0; i < 10; i++) { this.counter++; this.renderer.markForCheck(); // detectChanges() will only be called once per cycle } } }

// Accessing ChangeDetectorRef from ViewRenderer
const cdRef = this.renderer.cdref;
cdRef.markForCheck();

// Accessing ChangeDetectorRef from ViewRenderer
const cdRef = this.renderer.cdref;
cdRef.markForCheck();