DEV Community

Cover image for Component Inheritance in Angular. Object-oriented programming Series (Part 1)
es404020
es404020

Posted on

2 2

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 

}




}





Enter fullscreen mode Exit fullscreen mode

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();

}
}




Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more