How to implement multiple lifecycle hooks for an Angular2 component?

Question

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!

You say you tried export class ModalComponent implements OnChanges, OnDestroy { ... } but what about that failed? — silentsod
– silentsod, Commented Jan 10, 2017 at 22:44

A. Tim · Accepted Answer · 2017-01-10 22:44:18Z

52

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

class D extends C implements A, B{}

answered Jan 10, 2017 at 22:44

A. Tim

3,2161 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RasikaSam Over a year ago

Also make sure you import them properly import { Component, OnInit, Input, OnDestroy } from '@angular/core'

Maicon e Nanda Blumenau Over a year ago

I have the same problem, but this solution doesn't work for me, what i can do in this case.

Ram Kishore K · Accepted Answer · 2017-06-05 14:20:19Z

You were probably right when you implemented two interfaces with a comma separator.

Here's an example.

import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';


@Component({
  selector: 'app-ram-component',
  templateUrl: './ram.component.html',
  styleUrls: ['./ram.component.css']
})

export class RamComponentComponent implements OnInit,OnDestroy,AfterViewInit { 

  constructor() { }

  ngOnInit() {
    console.log('On Init');
  }
  ngAfterViewInit(){
    console.log('after view');
  }
  ngOnDestroy(){
    console.log('destroyed!!');
  }
}

Please note the import statement has to include all the necessary lifecycle hooks.

 import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';

Lifecycle Hooks Reference

Collectives™ on Stack Overflow

How to implement multiple lifecycle hooks for an Angular2 component?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related