Inheritance with Angular components:

Component classes are just classes with decorators. The decorators provide metadata which Angular uses to build the component instance and inject requested services in constructor through dependency injection at runtime.

So, can we extend one component class from another? Yes, but there are some gotchas which we are going to talk-through now.

Some Background on Angular compilation and change detection process:

Let’s take a step back and understand how Angular components gets compiled and how life-cycle methods on components get called at runtime.

Consider this simple app. It has an AppComponent , the root component, and configured in AppModule for bootstrap process.

In app component template, we have added child component element selector <app-child></app-child>.

Example

Coming to the child component implementation, it has a template and a style sheet. And this child component extends another component, ParentComponent, which has its own template and @Component decorator like any other component. If we run our application now, the bootstrap process kicks in main.ts file and it starts with creating platform, providers and then instantiates the components starting from root component, AppComponent. As we have the child component selector in AppComponent, angular will create an instance for ChildComponent and keeps it in LView — this is the angular’s internal representation of components which it uses to update DOM, running change detection and executing lifecycle methods etc.

Now, we know that Angular didn’t create any instance for ParentComponentas this component is not part of any component. So, the question now is does Angular calls life-cycle methods in ParentComponent ?

#components #angular #javascript #rendering #typescript