{"id":4886,"date":"2017-05-07T10:13:54","date_gmt":"2017-05-07T10:13:54","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=4886"},"modified":"2017-05-07T10:13:54","modified_gmt":"2017-05-07T10:13:54","slug":"lifecycle-hooks-in-angular-2","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/lifecycle-hooks-in-angular-2\/","title":{"rendered":"Lifecycle hooks in Angular 2"},"content":{"rendered":"

If you haven’t already read this post LIFECYCLE HOOKS<\/a>, I would highly recommend you go and read that first.<\/p>\n

This is a really short post on just getting up and running with lifecycle hooks.<\/p>\n

What are lifecycle hooks?<\/strong><\/p>\n

Angular 2 offers ways for our class\/components to be called when certain key parts of a lifecycle workflow occur. The most obvious would be after creation, some form of initialization phase and ofcourse conversely when a class\/component is cleaned up and potentially disposed of.<\/p>\n

These are not the only lifecycle hooks, but this post is not mean’t to replicate everything in Angular 2’s documentation, but instead highlight how we use the hooks in our code. <\/p>\n

How do we use a lifecycle hook<\/strong><\/p>\n

Let’s look at implementing a component with the two (probabaly) most used hooks, OnInit and OnDestroy, as these are obviously especially useful in situations where, maybe state needs to be loaded and stored.<\/p>\n

As usual, we need to import the two interfaces, hence we need the line<\/p>\n

\r\nimport { OnInit, OnDestroy } from '@angular\/core';\r\n<\/pre>\n
OnInit and OnDestroy look like this<\/p>\n
\r\nexport interface OnInit {\r\n   ngOnInit() : void;\r\n}\r\n\r\nexport interface OnDestroy {\r\n   ngOnDestroy(): void;\r\n}\r\n<\/pre>\n
Our component would then implement these interfaces, thus<\/p>\n
\r\n@Component({\r\n})\r\nexport class DetailsComponent \r\n      implements OnInit, OnDestroy {\r\n\r\n   ngOnInit(): void {\r\n   }\r\n\r\n   ngOnDestroy(): void {\r\n   }\r\n}\r\n<\/pre>\n
and that’s all there is to it. <\/p>\n
Note: In the above I said we need<\/strong> to import the interfaces. In reality this is not true, interfaces are optional (as they’re really a TypeScript construct to aid in type checking etc.). What Angular 2 is really looking for is the specially named methods, i.e. ngOnInit and ngOnDestroy in our case.<\/em><\/p>\n
See LIFECYCLE HOOKS<\/a> or more specifically the section on Lifecycle sequence for an understand when different parts of the life cycle hooks get called.<\/p>\n
For completeness, I’ll list the same here, but without all the descriptions.<\/p>\n