0

I have an Angular application developed in Angular version 8 which has n number of components. There is a common logic that needs to be executed for all the component's initialization in the application. I don't want to keep this common logic in a shared service and call it from the constructor or ngOninit life cycle hook of all the components. The reason for this is we have different developers who keep adding new components to the application and this common logic needs to be executed for those new components as well and lot of my time is getting consumed for telling the developers about this logic.

Is there a way to override the angular component initialization step from the angular core library to put my common logic so that this common logic gets executed for every component's initialization and saves my time from asking every developer to inject my shared service and call it from their component's ngOninit.

And this common logic is not a very complicated logic. It is just a simple Rest API call that registers the component's information in a file for logging purpose.

jps
  • 20,041
  • 15
  • 75
  • 79
Mohan Ramegowda
  • 11
  • 1
  • Did you try adding your logic in the base component as every component gets initialized after the base component. Generally, app.component is the base component. – Ankush Dutt Sep 06 '21 at 06:24
  • In the app.component i can execute my logic only once for registering the app.component. But i need this logic to get executed for every component. – Mohan Ramegowda Sep 07 '21 at 10:42

1 Answers1

0

Since you basically want to execute this piece of code for every component, Inheritance is first thing that comes to my mind. You can create a base component(it is a class) and then ask your peers to inherit/extend this particular base component. This way you need not explain the logic to the entire team. This base component will act as a contract to all the new components you create if you are extending it.

Edit: As per the comments, I'm adding the links for using AOP in Angular as this way we can easily add different logging aspects in an existing application.

https://gorillalogic.com/blog/how-to-achieve-aspect-oriented-programming-aop-in-angular-2/

https://jaxenter.com/cross-cutting-concerns-angular-2-typescript-128925.html

Ankush Dutt
  • 143
  • 8
  • Thanks for writing Ankush Dutt. But to implement this we have to modify all the huge set of existing components of the application which is going to be a costly operation. Me and my peers had already thought about this solution in the past but we couldn't agree to implement it due to the amount of change it requires. Is there any other way to put my piece of code? Is there any place where i can write a listener which listens to componeny rendering or initialization outside of components class? – Mohan Ramegowda Sep 08 '21 at 13:21
  • In that case, AOP seems to be your best bet. Using this, you can achieve this without writing the code again and again. We had a similar a problem for an existing JAVA application few days back and it worked. On similar terms, try to explore how AOP works in Angular. Hope this helps! – Ankush Dutt Sep 10 '21 at 05:00
  • Thanks for providing this information Ankush. Do you any sample where AOP is implemented in Angular 8 or higher versions. – Mohan Ramegowda Sep 30 '21 at 05:06
  • I have edited my answer with relevant links for Angular2. This should work for Angular 8 as well with minute changes. Please accept the answer if that was helpful. – Ankush Dutt Oct 01 '21 at 06:33