SoFunction
Updated on 2025-04-13

Implementation method of angular component inheritance page 1/2

Angular version 2.3 introduces component inheritance functionality, which is very powerful and can greatly increase the reusability of our components.

Component inheritance involves the following:

Metadata: such as @Input(), @Output(), @ContentChild/Children, @ViewChild/Children, etc. The metadata defined in the derived class will overwrite any previous metadata in the inheritance chain, otherwise the base class metadata will be used.

Constructor: If the derived class does not declare the constructor, it will use the constructor of the base class. This means that all services injected by the base class constructor are accessible to the child components.

Lifecycle hooks: If the base class contains lifecycle hooks, such as ngOnInit, ngOnChanges, etc. Although no corresponding life cycle hook is defined in the derived class, the life cycle hook of the base class will be called automatically.

It should be noted that templates cannot be inherited, so the shared DOM structure or behavior needs to be handled separately. For more information, please check out - properly support inheritance.

Next, let’s quickly experience the functions inherited by component and verify the above conclusion. The specific examples are as follows (the Angular version based on all examples in this article are - 4.0.1):


import { Component, ElementRef, Input, HostBinding, HostListener, OnInit } from '@angular/core'; @Component({
  selector: 'exe-base', // template will not be inherited template: `
  <div>
    exe-base：I ambaseComponents? - {{isBase}}
  </div>
 ` }) export class BaseComponent implements OnInit { @Input() isBase: boolean = true; @HostBinding('') color = 'blue'; // will be inherited @HostListener('click', ['$event']) // will be inherited onClick(event: Event) { (`I am BaseComponent`);
  } constructor(protected eleRef: ElementRef) { }

  ngOnInit() { ('BaseComponent：ngOnInit method has been called');
  }
}



import { Component, HostListener, OnChanges, SimpleChanges } from '@angular/core'; import { BaseComponent } from './'; @Component({
  selector: 'exe-inherited',
  template: `
  <div>
   exe-inherited：I ambaseComponents? - {{isBase}}
  </div>
 ` }) export class InheritedComponent extends BaseComponent implements OnChanges { @HostListener('click', ['$event']) // overridden onClick(event: Event) { (`I am InheritedComponent`);
  }
  ngOnChanges(changes: SimpleChanges) { (); // ：exe-inherited }
}


import { Component, OnInit } from '@angular/core'; import {ManagerService} from "./"; @Component({
 selector: 'exe-app',
 template: `
  <exe-base></exe-base>
  <hr/>
  <exe-inherited [isBase]="false"></exe-inherited>
 ` }) export class AppComponent {
 currentPage: number = 1;
 totalPage: number = 5;
}

Next, we briefly discuss a potentially confusing topic, does metadata allow inheritance in @Component()? The answer is no, child components cannot inherit metadata from the parent component decorator. It makes sense to limit metadata inheritance fundamentally because our metadata is used to describe component classes. We need different metadata for different components, such as selector, template, etc. Angular 2 component inheritance is mainly about the reuse of the logic layer. You can first read the practical part below and then experience it carefully.

Now let's implement a simple pagination component.

import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({
  selector: 'simple-pagination',
  template: `
    <button (click)="previousPage()" [disabled]="!hasPrevious()">Previous</button> 
    <button (click)="nextPage()" [disabled]="!hasNext()">Next</button>
    <p>page {{ page }} of {{ pageCount }} </p>
  ` }) export class SimplePaginationComponent { @Input() pageCount: number; @Input() page: number; @Output() pageChanged = new EventEmitter<number>();

  nextPage() { (++);
  }

  previousPage() { (--);
  }

  hasPrevious(): boolean { return  > 1;
  }

  hasNext(): boolean { return  < ;
  }
}


import { Component, OnInit } from '@angular/core'; import {ManagerService} from "./"; @Component({
 selector: 'exe-app',
 template: `
  <simple-pagination 
                            

12Next pageRead the full text
  • angular
  • Components
  • inherit

Related Articles

  • Angular2 questions about @angular/cli default port number configuration

    This article mainly introduces Angular2's problem with @angular/cli's default port number configuration. It is very practical. Friends who need it can refer to it.
    2017-07-07

  • Detailed explanation of the problem of cross-domain requests based on angular-cli configuration proxy

    This article mainly introduces a detailed explanation of the solution to cross-domain request problems based on angular-cli configuration agent, which has certain reference value. Interested friends can refer to it.
    2017-07-07

  • Detailed explanation of Angular Material Icon usage

    This article mainly introduces the detailed explanation of the use of Angular Material Icon. The editor thinks it is quite good. I will share it with you now and give you a reference. Let's take a look with the editor
    2018-11-11

  • angularjs get the value method of the default selected radio button

    Below, the editor will share with you an angularjs method to get the value of the radio button selected by default. It has good reference value and hope it will be helpful to everyone. Let's take a look with the editor
    2018-02-02

  • AngularJS date formatting detailed explanation

    There are two forms of date formatting in AngularJS. One is in HTML pages and the other is in JS code. Both use the AngularJS filter $filter
    2015-12-12

  • Use AngularJs to achieve the effect of JD homepage carousel

    This article introduces you how to use AngularJs to achieve the effect of JD homepage carousel diagram. This article introduces the implementation process in detail through sample code, which has certain reference value for everyone to learn AngularJS. Friends in need can refer to it.
    2016-09-09

  • Tutorial on using angular1 with gulp and bower

    This article mainly introduces the tutorial on using angular1 with gulp and bower. This article introduces you very detailed and has reference value. Friends who need it can refer to it.
    2018-01-01

  • Detailed explanation of AngularJS custom control instance

    This article mainly introduces AngularJS custom controls, and analyzes the related functions and usage techniques of AngularJS custom instructions and template operations in detail in combination with examples. Friends who need it can refer to it
    2016-12-12

  • angularJS directive encapsulation back to top example details

    This article mainly introduces the detailed explanation of the angularJS command packaging back to the top. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let's take a look with the editor
    2017-01-01

  • Implement image magnifying glass effect based on angularjs

    This article shares with you the source code examples of angularjs to realize the effect of shopping magnifying glass. The code introduction is very detailed. If you need it, you can refer to it. Let’s take a look together below.
    2016-08-08

Latest Comments