angular life cycle

in Informatica

Angular Component’s lifecycle

Reading Time: < 1 minute

In questo post riassumo il Component’s lifecycle di Angular. E’ un post molto semplice ma mi sembrava molto utile condividerlo.

Ecco una serie di hooks in ordine di esecuzione (attenzione che alcuni vengono eseguiti piu di una volta durante il ciclo di vita di un Components):

  • ngOnChanges(): viene eseguito quando angular imposta la proprietà di input associate ai dati. Il metodo riceve un oggetto SimpleChanges con i valori correnti e precedenti delle singole proprietà. Viene chiamato prima di ngOnInit() e ogni volta che cambiano una o più proprietà di input associate ai dati
  • ngOnInit(): inizializza la direttiva o il componente dopo che angular ha visualizzato per la prima volta le proprietà associate ai dati ed imposta le proprietà di input della direttiva o componente. Viene chiamato una volta sola dopo ngOnChanges()
  • ngDoCheck(): rileva le modifiche che angular non riesce a verificare. Chiamato ogni volta che viene eseguito il rilevamento delle modifiche, immediatamente dopo ngOnChanges() e ngOnInit()
  • ngAfterContentInit(): viene eseguito quando angular invia il contenuto esterno ad una view di Component / la vista dove è posizionata una direttiva. Chiamato una volta, dopo ngDoCheck()
  • ngAfterViewChecked(): viene eseguto dopo che il meccanismo di Change Detection di Angular ha controllato tutti i suoi Content Children. Viene richiamato dopo ngAfterViewInit() . Nei controlli successivi viene invece eseguito dopo il metodo ngDoCheck().
  • ngOnDestroy(): viene eseguito da angular poco prima che venga distrutta una direttiva/component. Annulla l’iscrizione degli Observable ed esegue il detach degli eventi
  • Gestori per evitare memory leaks: sono chiamati appena prima che angular distrugga la direttiva/componente.