CODEWITHSUNDEEP
angularlifecycle-hook
SemperCallide
SemperCallide

Reputation: 2070

How to implement multiple lifecycle hooks for an Angular2 component?

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!

Upvotes: 37

Views: 41847

Answers (2)

Ram Kishore K
Ram Kishore K

Reputation: 349

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

Upvotes: 14

A. Tim
A. Tim

Reputation: 3196

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

class D extends C implements A, B{}

Upvotes: 52

Related Questions