Astuce : Ce guide suppose que vous avez déjà lu le guide des Fondamentaux. Commencez par celui-ci si vous découvrez Angular.
ChangeDetectionStrategy
Le décorateur @Component accepte une option changeDetection qui contrôle le mode de détection
de changements du composant. Il existe deux modes de détection de changements.
ChangeDetectionStrategy.Eager/Default est un mode facultatif. Dans ce mode,
Angular vérifie si le DOM du composant doit être mis à jour chaque fois qu'une activité a pu se produire
n'importe où dans l'application. Les activités qui déclenchent cette vérification incluent les interactions de l'utilisateur, les réponses réseau,
les timers, et plus encore.
ChangeDetectionStrategy.OnPush est la stratégie par défaut (depuis la v22). Ce mode réduit la quantité de vérifications qu'Angular
doit effectuer. Dans ce mode, le framework vérifie si le DOM d'un composant doit être mis à jour uniquement quand :
- Un input du composant change à la suite d'un binding dans un template, ou
- Un event listener de ce composant s'exécute
- Le composant est explicitement marqué pour vérification, via
ChangeDetectorRef.markForCheckou quelque chose qui l'encapsule, commeAsyncPipe.
De plus, quand un composant OnPush est vérifié, Angular vérifie aussi tous ses composants ancêtres, en remontant l'arbre de l'application.
PreserveWhitespaces
Par défaut, Angular supprime et réduit les espaces superflus dans les templates, le plus souvent ceux
des retours à la ligne et de l'indentation. Vous pouvez modifier ce réglage en définissant explicitement preserveWhitespaces à
true dans les métadonnées d'un composant.
Schémas de custom elements
Par défaut, Angular lève une erreur quand il rencontre un élément HTML inconnu. Vous pouvez
désactiver ce comportement pour un composant en incluant CUSTOM_ELEMENTS_SCHEMA dans la propriété schemas
des métadonnées de votre composant.
import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
@Component({
...,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: '<some-unknown-component />'
})
export class ComponentWithCustomElements { }
Angular fournit aussi NO_ERRORS_SCHEMA, qui autorise n'importe quel élément et n'importe quelle propriété.