Inheritance - Angular 2

One of the exciting new feature is component inheritance. Component inheritance is very powerful and it can increase your code reusability.

What does component inheritance provide us?
Component Inheritance in Angular covers all of the following:

Metadata (decorators): metadata (e.g. @Input(), @Output), etc. defined in a derived class will override any previous metadata in the inheritance chain otherwise the base class metadata will be used.

Constructor: the base class constructor will be used if the derived class doesn’t have one, this mean that all the services you injected in parent constructor will be inherited to child component as well.

Lifecycle hooks: parent lifecycle hooks (e.g. ngOnInit, ngOnChanges) will be called even when are not defined in the derived class.

Component inheritance DO NOT cover templates and styles. Any shared DOM or behaviours must be handled separately.

Building with Component Inheritance
Let's start with a simple code. Here I will access the data from parent component to child component.

Use the Project that you have created before for Custom Directive.

1- Add a new folder named "Inheritance" in src/app directory.
2- Add two component, one is parent and other is child.

cd src\app\Inheritance
ng g c parent -is --flat --spec false
ng g c child -is --flat --spec false

3- Add a variable and a function in parent component.

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

@Component({

  selector: 'app-parent',

  templateUrl: './parent.component.html',

  styles: []

})

export class ParentComponent  {

protected company: string;

  constructor() { this.company="Dotnet guru";}

 public getHello()

 {

    alert("Hello Guru");

 }

}

4- Now extend the parent component in child component.
The super keyword can be used in child to reference parent class properties and the parent  class constructor.

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

import{ParentComponent} from './parent.component';

@Component({

  selector: 'app-child',

  templateUrl: './child.component.html',

  styles: []

})

export class ChildComponent extends ParentComponent {

  constructor() { super();}

}

5- Now you can access the parent component data in child component. see the code below in child.component.html

<p>

{{company}}

</p>

<button type="button" class="btn btn-lg btn-default" (click)="getHello()">button

</button>

6- To run the page, bootstrap the ChildComponent in app.Module.ts file.

7- Add the selector of ChildComponent in index.html file.
<app-child></app-child>

8- Now save your Project and run from integrated terminal.
       ng serve <Enter>