Angular Lifecycle

Angular — Lifecycle Hook Methods with Stackblitz Online PeekABoo Sample

Explain Angular 9 — Lifecycle hooks with PeekABoo sample on

Angular Lifecycle Hook Methods

In this article, I will combine running Angular project online (via stackblitz.com) with an explanation by the sequence diagram.

Flow is: you run code on section 1 (1 — Original Demo Source Code & Visualize), with modification of 2 files in section 2 (2 — Update Source Code), and compare with Sequence Diagram of section 3 (3 — Sequence Diagram of Lifecycle Hooks between PeekABooParentComponent, PeekABooComponent, and PeekABookDirective), and you can check the timeline of lifecycle hook methods of Angular in the diagram of section 4 (4 — Timeline Between Methods in Lifecycle Hooks). Hope this helps.

1 — Original Demo Source Code & Visualize

https://stackblitz.com/angular/gqrnmlbnjde?file=src%2Fapp%2Fpeek-a-boo-parent.component.ts

2 — Update Source Code

(1) peek-a-boo-parent.component.ts

(2) peek-a-boo.component.ts

3 — Sequence Diagram of Lifecycle Hooks between PeekABooParentComponent, PeekABooComponent, and PeekABookDirective

Angular Lifecycle Hook.drawio

Lifecycle Hooks In PeekABoo Sample

4 — Timeline Between Methods in Lifecycle Hooks

Angular Lifecycle Hook.drawio

Angular Lifecycle Methods Timeline

Enjoy Coding!