Angular 2 Component Inheritance

Question

I would like to create an abstract base component which contains the html template. Methods in the concrete classes extending the base component would supply the data and some other details needed by the base class to create the component.

I would like for the base component to be able to get the name of another component from the concrete component that is to be added to the html template.

For example the base component might include a template html that looks something like this:

<div>Base Component</div>
component: <{{getSelectorName()}}></{{getSelectorName()}}>

getSelectorName() could be "ABC-comp" for one concrete implementation and "DEF-comp" for another. Please note that I am just using the {{}} notation for illustration purposes.

Is this possible? How would one go about doing that?

Thank you!!!

{{}} is for attribute and property binding and invalid everywhere else. Dynamic component selectors are not supported. — Günter Zöchbauer
– Günter Zöchbauer, Commented Nov 7, 2017 at 16:32
You can use the same templateUrl and styleUrls for all component you want. — Eliseo
– Eliseo, Commented Nov 7, 2017 at 16:36
Use dynamic- content loader for dynamically adding components. Refer:- stackoverflow.com/questions/47055809/… — Manzer A
– Manzer A, Commented Nov 7, 2017 at 16:50
I do realize the purpose of the {{}} brackets. I was just using the syntax to be illustrative. I should have been more clear. Thanks! — khpremier
– khpremier, Commented Nov 7, 2017 at 17:39

Eliseo · Accepted Answer · 2017-11-07 16:46:29Z

1

You can use the same templateUrl and styleUrls for all component you want, Therefore you can create a Component "base" and extends all component from this base. Only in constructor use super() and overwrite the function you want change. Becareful width the injected services

//Base Component
@Component({
  selector: 'app-base',
  templateUrl: './app-base.component.html',
  styleUrls: ['./app-base.component.css']
})
export class BaseComponent{
    constructor(private servicio:Servicio){}
    funcion1(){}
    function2(){}
} 

//Other component
@Component({
  selector: 'component1-base',
  templateUrl: './app-base.component.html', //<--same html
  styleUrls: ['./app-base.component.css']   //<--same css
})
export class Component1Component extends BaseComponent{
    constructor(servicio:Servicio){
         super(servicio);
         //if you want use servicio you can do
         //this.custom.servicio=servicio
    }
    funcion1(){  
       //this override function1()
       //we can use this.function2()
    }
}

answered Nov 7, 2017 at 16:46

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

khpremier Over a year ago

This is precisely my plan. However in that app-base.component.html, I want the html to include a reference to another component that is dependent upon which implementation has extended this BaseComponent. Thank you!

Eliseo Over a year ago

I don't know if angular.io/guide/dynamic-component-loader help you (good luck)

BALA · Accepted Answer · 2018-07-31 13:45:51Z

0

You can inherit and override whatever you want, except for templates and styles.

Reference:

https://embed.plnkr.co/hMgaYPVRiXMCiKBdfqHy/

answered Jul 31, 2018 at 13:45

BALA

1,2001 gold badge12 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular 2 Component Inheritance

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related