Using lifecycle hooks in AngularJS components

AngularJS components, introduced in version 1.5+, offer a more structured approach to building AngularJS applications. One key feature of AngularJS components is the lifecycle hooks, which allow you to hook into different phases of a component’s lifecycle and execute logic at specific points. These lifecycle hooks provide better control over how components behave as they are created, updated, and destroyed.

In this article, we’ll dive deep into how to use the lifecycle hooks in AngularJS components.

---

1. Introduction to Lifecycle Hooks in AngularJS

When you define a component in AngularJS, it goes through a lifecycle that can be divided into the following phases:

• Creation phase: The component is initialized.
• Update phase: The component’s state is updated based on new inputs or interactions.
• Destruction phase: The component is removed from the DOM.

AngularJS provides several lifecycle hooks that you can use to interact with your component during these phases.

---

2. List of Available Lifecycle Hooks

Here’s a list of lifecycle hooks that you can implement within your component:

• $onInit: Called once, after the component’s bindings have been initialized.
• $onChanges: Called whenever an input binding changes.
• $doCheck: Called on every change detection cycle, allowing for custom checks.
• $onDestroy: Called just before the component is destroyed and removed from the DOM.
• $postLink: Called after the component’s template and child directives have been linked.

Let’s explore these lifecycle hooks in more detail.

---

3. Using $onInit Lifecycle Hook

The $onInit lifecycle hook is used to perform initialization logic after the component’s bindings are initialized.

Example:

app.component('exampleComponent', {
  bindings: {
    title: '@'
  },
  template: `<h1>{{ $ctrl.title }}</h1>`,
  controller: function() {
    this.$onInit = function() {
      console.log('Component Initialized');
      // Perform any setup or initialization logic
    };
  }
});

Explanation:

• $onInit is called once when the component is initialized and its bindings have been set.
• This is useful for performing any setup logic (like making API calls, initializing variables, or setting default values).

---

4. Using $onChanges Lifecycle Hook

The $onChanges lifecycle hook is called whenever one of the input bindings changes. This is especially useful for responding to changes in data passed to the component.

Example:

app.component('changeExampleComponent', {
  bindings: {
    name: '@'
  },
  template: `<div>Hello, {{$ctrl.name}}</div>`,
  controller: function() {
    this.$onChanges = function(changesObj) {
      console.log('Changes Detected:', changesObj);
      if (changesObj.name) {
        console.log('Name changed:', changesObj.name.currentValue);
      }
    };
  }
});

Explanation:

• $onChanges is triggered whenever an input binding changes.
• It receives an object that contains the details of the changes (currentValue, previousValue, etc.).
• This hook is useful when you need to respond to changes in inputs.

---

5. Using $doCheck Lifecycle Hook

The $doCheck lifecycle hook is called on every change detection cycle, allowing you to implement custom change detection logic.

Example:

app.component('checkExampleComponent', {
  bindings: {
    counter: '<'
  },
  template: `<div>Counter: {{$ctrl.counter}}</div>`,
  controller: function() {
    this.$doCheck = function() {
      // Custom logic to detect changes
      console.log('Custom change detection logic executed.');
    };
  }
});

Explanation:

• $doCheck runs on every digest cycle.
• This hook is useful if you want to detect changes that AngularJS doesn’t automatically detect or need to trigger custom logic during each cycle.
• Use this hook carefully because it can be expensive if overused, as it runs on every change detection cycle.

---

6. Using $onDestroy Lifecycle Hook

The $onDestroy lifecycle hook is called just before the component is destroyed and removed from the DOM. It is often used to clean up resources or unsubscribe from events to avoid memory leaks.

Example:

app.component('destroyExampleComponent', {
  template: `<div>Component will be destroyed soon!</div>`,
  controller: function() {
    this.$onDestroy = function() {
      console.log('Component is about to be destroyed');
      // Perform cleanup actions like unsubscribing from observables or event listeners
    };
  }
});

Explanation:

• $onDestroy is useful for performing cleanup tasks such as unsubscribing from events, clearing timers, or detaching listeners when the component is destroyed.

---

7. Using $postLink Lifecycle Hook

The $postLink lifecycle hook is called after the component’s template and child directives have been linked. It is useful for manipulating the DOM or interacting with child elements after they are fully rendered.

Example:

app.component('postLinkExampleComponent', {
  template: `<div><button ng-click="$ctrl.changeText()">Change Text</button></div>`,
  controller: function() {
    this.$postLink = function() {
      console.log('DOM has been rendered.');
      // Perform actions after the component's DOM is fully rendered
    };

    this.changeText = function() {
      console.log('Text changed!');
    };
  }
});

Explanation:

• $postLink is useful when you need to interact with the DOM elements or child directives after the component’s template has been fully rendered.
• This hook is not as commonly used as $onInit but is important for cases where DOM manipulation is required after the initial render.

---

8. Example: Full Lifecycle Usage

Let’s create a more complete example where we combine multiple lifecycle hooks:

app.component('fullLifecycleComponent', {
  bindings: {
    data: '='
  },
  template: `<div>
               <h3>{{$ctrl.title}}</h3>
               <div>{{$ctrl.data}}</div>
             </div>`,
  controller: function() {
    this.title = 'Full Lifecycle Component';

    this.$onInit = function() {
      console.log('Component Initialized');
      // Initialization logic
    };

    this.$onChanges = function(changesObj) {
      if (changesObj.data) {
        console.log('Data changed:', changesObj.data.currentValue);
      }
    };

    this.$doCheck = function() {
      console.log('Checking for custom changes...');
      // Custom change detection logic
    };

    this.$postLink = function() {
      console.log('DOM fully rendered');
      // Interact with DOM after rendering
    };

    this.$onDestroy = function() {
      console.log('Component is being destroyed');
      // Cleanup logic (e.g., unsubscribe)
    };
  }
});