I'm encountering difficulties when trying to activate the controller lifecycle hooks in my Angular 1.57 / Typescript application, which utilizes components instead of controllers.
The main reason behind this approach is the necessity for carrying out DOM manipulations only after all the HTML content has been fully loaded. Thus far, I have experimented with two different approaches as outlined below:
The $postLink function serves as an NGcontroller lifecycle hook programmed to execute following the complete loading of DOM elements. This particular function is placed at the beginning of my component's code.
On the other hand, $viewContentLoaded accomplishes a similar task, and I have incorporated it within the $routerOnActivate function.
Approach 1
public $postLink(){
this.log.debug('postLink all done');
}
Approach 2
$routerOnActivate(next, prev) {
this.$scope.$on('$viewContentLoaded', (event) => {
this.log.debug('viewContentLoaded all done');
});
};
Upon implementing these methods, I noticed that the 'postLink all done' log is triggered before any other actions take place, whereas the 'viewContentLoaded all done' log fails to be activated altogether.
The fundamental purpose behind this functionality is to carry out specific actions on certain HTML elements within the page post-loading. Therefore, it is imperative to ensure that all HTML content is fully rendered prior to triggering these actions.