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.