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!

Answer 1

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

class D extends C implements A, B{}

Answer 2

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