Angular Abyss: Components life-cycle

Dear NgReader, welcome to Angular Abyss series of articles made by me, which describe Angular’s most hot topics and common problems. Hope you enjoy!

All articles:

1. Components life-cycle.
2. Service scope.
3. OnPush change detection.
4. NgFor optimization with trackBy magic.

Problem

We want to understand components classes creation/destruction in browser memory, what is life cycle hooks and how to use it.

First of all, let’s create a project using Angular CLI.

ng new my-app --routing

I am using VS Code that has a nice command line shortcut to open editor in current directory.

cd my-app && code .

Now, use angular cli to generate some components.

ng g c pages/pageA 
ng g c pages/pageB
ng g c components/blockA
ng g c components/blockB

We generated two components that represents components accessed by routing. Block components will be pure presentation components to display some data. Block components can be repeated multiple time on the same page or on different pages.

Go to the app-routing.module.ts file and modify routes array with new routes.

Here we go! Open app.component.html to add some navigation links.

To catch the moment when component is created we add some console log messages to ngOnInit and ngOnDestroy hooks.

Repeat the same for BlockBComponent. Don’t forget to add OnDestroy interface to class.

Now, add blockA to pageA and blockB to pageB.

Run angular command to start the application.

ng serve -o

Open browser console and watch how the components are created and destroyed each time you go or leave the page. You can add more components if you wish.

We get the same behavior with components created by lazy-loaded module.

You can also check create/destroy order for child components.

Run following command to create a child component for block a.

ng g c components/block-a/childs/child-a

Add logs to new ChildAComponent class and change BlockAComponent template to this:

Remember that directive *ngIf always triggers component create/destroy.

To test it change block-a.component.html to this:

And block-a.component.ts to this:

Run the application and see how child-a component is created and destroyed every time you click a button. Keep it in mind using ngIf directive.

What about *ngFor directive? It also triggers components create/destroy hooks.

When you add a new element in collection that used in a template, it creates a new instance of that component in memory. When you remove item, it destroys a component. Nothing special here, works as expected.

The only one thing that is important that Angular re-render only items that are changed in array. Even if you add a new array with the same elements, no changes in DOM will be performed.

NOTE: This is not always like this. We are lucky that in our example we have literals (numbers) and Angular understands which numbers are changed and which are not. However, if you replace numbers array with array of objects, the whole list will be re-rendered and that could be a problem working with long lists.

*ngFor directive is enough smart and tries to optimize operations with DOM, but in some cases requires an additional configuration. Explanation of such behavior is beyond the scope of this article, so I have the whole post dedicated to this. Read about it here.

Summary: Component classes are instantiated/destroyed by router. All the child components are instantiated after parent and the same for destroy. Child components are destroyed first and then their parent.

When you hide a component with ngIf, its class instance is erased from memory. Showing a component will create another instance.

When you iterate through the list with ngFor, add/remove items from list triggers create/destroy of the component. For more information read this article.

See the project code here.

🚀 If you read something interesting from that article, please like and follow me for more posts. Thank you NgReader! 😏