Angular — Understanding Angular lifecycle hooks with a Sample Project

Understanding Component lifecycle hooks are very important for any successful Angular project.

Bhargav Bachina
Bachina Labs

--

Every component/directive undergo a lifecycle as Angular create, update and destroys them over time. Let’s discuss what are those, why and when we should use those with a sample project.

Component lifecycle hooks

Angular provides eight interfaces to implement those as component goes from creation to destruction phases. Let’s understand these with the sample project.

  • Sample Project
  • Understand lifecycle methods order
  • Lifecycle methods With Some Examples
  • Summary
  • Conclusion

Sample Project

Below is the sample project to demonstrate all these lifecycle hooks and other things in this article. Let’s clone and start the project!

git clone https://github.com/bbachi/angular-lifecycle-hooks.git// install dependencies
npm install
// start the project
npm start

This is a TODO list App where you can add, edit and delete items. This is a very good example to understand all our angular lifecycle hooks.

--

--