Component Inheritance in Angular. Object-oriented programming Series (Part 1)

As you no the four fundamental concepts of Object-oriented programming – Inheritance, Encapsulation, Polymorphism, and Data abstraction.

In this post we would be look at how to perform Inheritance with angular component.

Step 1

Create a base component which contains any logic which could be reusable across other component in your application.

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'es404020-base', template: '', }) export class BaseComponent { public submitted: boolean; constructor() { this.submitted = false; } changeState(){ this.submitted != this.submitted } } 

Step 2

Next is to inherit this base component.To inherit a class we simply extend the component.

 export class AppComponent extends BaseComponent implements OnInit { constructor() { super(); } } 

super():be used in expressions to reference base class properties.

That how you can achieve simple Inheritance in angular.Thanks for reading.