¿Qué es la detección de cambios en Angular y en qué se diferencia la estrategia OnPush de la estrategia predeterminada?

Change Detection en Angular es un mecanismo que rastrea los cambios en los datos del componente y actualiza el DOM para mostrar el estado actual de la aplicación. Angular verifica automáticamente los componentes en busca de cambios y actualiza la vista cuando los datos cambian.

La estrategia predeterminada (Default) significa que Angular verifica el componente y todos sus componentes hijos en cada evento, temporizador o llamada asíncrona, lo cual puede ser costoso en términos de rendimiento.

La estrategia OnPush optimiza el rendimiento haciendo que Angular verifique el componente solo si:

• La entrada @Input ha cambiado (comparación por referencia),
• O se ha producido un evento dentro del componente,
• O se llama manualmente a detectChanges.

Esto permite reducir la cantidad de verificaciones y mejorar el rendimiento, especialmente en aplicaciones grandes.

Ejemplo de uso de OnPush:

@Component({
  selector: 'my-component',
  template: `{{data.name}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() data: { name: string };
}

Aquí Angular actualizará el componente solo si la referencia a data cambia.