JS-401-Angular
  • Introduction
  • Part 1: TypeScript Overview
    • 1.1: Types
    • 1.2: Classes
    • 1.3: Interfaces
  • Part 2: Angular Architecture
    • 2.1: MVC
    • 2.2: Modules
    • 2.3: Components
  • Part 3: Lifecycle Hooks
    • 3.1: Overview
  • Part 4: Data Binding
    • 3.1: String Interpolation
    • 3.2: Property Binding
    • 3.3: Event Binding
    • 3.4: Two-Way Data Binding
  • Part 4: Directives
    • 4.1: ngIf and ngFor
    • 4.2: Attribute Directives
    • 4.3: Structural Directives
  • Part 5: Pipes
    • 5.1: Overview
  • Part 6: Observables and RxJS
    • 6.1: Observables
    • 6.2: RxJS
    • 6.3: Custom Observables
  • Part 7: Dependency Injection and Services
    • 6.1: Observables
    • 6.2: RxJS
    • 6.3: Custom Observables
  • Eleven Fifty Style Guide
Powered by GitBook
On this page
  1. Part 3: Lifecycle Hooks

3.1: Overview

When a new component is created in Angular, it goes through a couple of phases during its creation. These phases are can be accessed through what Angular calls lifecycle hooks. By tapping into these hooks, we have the ability to act upon them when they occur.

The lifecycle hooks are:

  • ngOnChanges - Called after a bound input property changes

  • ngOnInit - Called once the component is initialized

  • ngDoCheck - Called during every change detection run

  • ngAfterContentInit - Called after content (ng-content) has been projected into view

  • ngAfterContentChecked - Called every time the projected content has been checked

  • ngafterviewInit - Called after the component's view(and child views) has been initialized

  • ngAfterViewChecked - called every time the view (and the child views) have been checked

  • ngOnDestroy - Called once the component is ab about to be destroyed

PreviousPart 3: Lifecycle HooksNextPart 4: Data Binding

Last updated 7 years ago