title: Lifecycle hooks in Angular Components, DOM Manipulation
body: <p>I'm having issues activating the controller lifecycle hooks in my Angular 1.57 / Typescript app. I am using components (not controllers).</p>
  
  <p>The reason i am doing this is because I need to do some DOM manipulation after all of my HTML is loaded. The two methods i've tried so far are below. </p>
  
  <p>The <strong>$postLink</strong> is a NGcontroller lifecycle hook that should fire after all the DOM elements are loaded. This is the first function i have in my component. </p>
  
  <p>The <strong>$viewContentLoaded</strong> essentially does the same thing from what i've seen. I have this inside my <strong>$routerOnActivate</strong> function.</p>
  
  <p><strong>Method 1</strong></p>
  
  <pre><code>public $postLink(){
      this.log.debug('postLink all done');
  }
  </code></pre>
  
  <p><strong>Method 2</strong></p>
  
  <pre><code>$routerOnActivate(next, prev) {    
      this.$scope.$on('$viewContentLoaded', (event) =&gt; {
          this.log.debug('viewContentLoaded all done');
      });
  };
  </code></pre>
  
  <p>With these two methods implemented, the <strong>$postLink all done</strong> log gets triggered before everything else and my <strong>$viewContentLoaded all done</strong> log never gets triggered.</p>
  
  <p>The purpose of this is so i can trigger actions on HTML elements that are on the page. So i need to wait until all the HTML is loaded before i can trigger those actions.</p>