Code Explainers

Code explainers tagged #change-detection

typescript
import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
 
interface Point {
  x: number;

Throttling pointer events with NgZone in Angular

change-detection requestanimationframe event-throttling
Advanced 8 steps
typescript
import {
  Directive,
  ElementRef,
  EventEmitter,

An infinite-scroll directive in Angular

intersectionobserver directives performance
Advanced 7 steps
typescript
import {
  Component,
  ComponentRef,
  Injector,

Dynamic component rendering in Angular

dynamic-components viewcontainerref lifecycle-hooks
Advanced 7 steps
typescript
import { Directive, ElementRef, EventEmitter, inject, NgZone, OnDestroy, Output } from '@angular/core';
 
@Directive({
  selector: '[appResizeDebounced]',

A debounced resize directive in Angular

debounce change-detection host-bindings
Advanced 7 steps
typescript
import { Component, ChangeDetectionStrategy } from '@angular/core';
 
@Component({
  selector: 'app-card',

Multi-slot content projection in Angular

content-projection components templates
Intermediate 7 steps
typescript
import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { toObservable } from '@angular/core/rxjs-interop';

Virtual scrolling a contact list in Angular

virtual-scrolling signals change-detection
Intermediate 6 steps
typescript
import { Pipe, PipeTransform, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
 
@Pipe({
  name: 'timeAgo',

A self-refreshing timeAgo pipe in Angular

impure-pipe change-detection timers
Advanced 10 steps