How to implement multiple lifecycle hooks for an Angular2 component?

angular lifecycle-hook
SemperCallide picture SemperCallide · Jan 10, 2017 · Viewed 34k times · Source

I know that when defining components in Angular2 you have multiple types of lifecycle hooks that you can implement such as OnDestroy, NgOnInit, etc.

In every sample piece of code I've seen online about using these hooks, I only ever see them being used one at a time. For instance

export class ModalComponent implements OnDestroy { ... }

or

export class ModalComponent implements OnChanges { ... }

But what if you want to use multiple for a single component? For instance, what if you want specific behavior for OnChanges AND OnDestroy? I've tried the following: 

export class ModalComponent implements OnChanges implements OnDestroy{ ... } 
export class ModalComponent implements OnChanges, OnDestroy { ... } 
export class ModalComponent implements [OnChanges, OnDestroy] { ... } 
export class ModalComponent implements OnChanges and OnDestroy { ... }

I'm certain the answer is very simple but I'm having a remarkable amount of trouble finding an answer to this.

Thank you in advance!

Answer

A. Tim picture A. Tim · Jan 10, 2017

You can extend 1 class and implement multiple interfaces. Lifecycle hooks are interfaces.

class D extends C implements A, B{}

Related questions

How do I run a function on ngOnInit() only once and not again upon returning back from another routerLink?

HomeComponent ngOnInit() { console.log('loaded'); this.retrieveData(); } retrieveData() { // this.dataService.getData().subscribe(...); } I am retrieving data when the component loads. When the user clicks on another routerLink, for example, SettingsComponent and returns back to the HomeComponent, the function of course, …

Read More
Can't bind to 'ngModel' since it isn't a known property of 'input'

I've got the following error when launching my Angular app, even if the component is not displayed. I have to comment out the <input> so that my app works. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't …

Read More
ngFor with index as value in attribute

I have a simple ngFor loop which also keeps track of the current index. I want to store that index value in an attribute so I can print it. But I can't figure out how this works. I basically have …

Read More