Angular component inheritance, keep parent html

Question

I use a lot of inheritance between my Angular components.

Sometimes, I would like to be able to inherit from a specific component, and not provide some html for the child (because it is always going to be the same as the parent) which leads to duplicate code everywhere.

What is the best way to achieve this ?

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class Parent {

}

@Component({
  selector: 'app-child',
  template: '', <-- you have to provide a template
})
export class Child extends Parent {

}

still use templateUrl: './parent.component.html',? any reason you do not want to do this? — ABOS
– ABOS, Commented Mar 12, 2019 at 18:24
Yes of course this is one solution but I want my component to be as easy as possible to inherit, and for someone new jumping into the project, the mistake of not replacing the templateUrl path can be done. — Scaraux
– Scaraux, Commented Mar 12, 2019 at 18:25
As ABOS said, but also note, you can use relative paths to reference the parent HTML if it's in a different directory. — Richard Dunn
– Richard Dunn, Commented Mar 12, 2019 at 18:25
../../parent.component.html to go back/up two directories. It gets messy fairly fast though. — Richard Dunn
– Richard Dunn, Commented Mar 12, 2019 at 18:27
Oh okay my bad I read it wrong. Yes of course relative paths but its in complete different folders. I am really open to the cleanest way of achieving this. I was thinking about writing a constant in the parent that returns the path of the parent template — Scaraux
– Scaraux, Commented Mar 12, 2019 at 18:29

ABOS · Accepted Answer · 2019-03-12 19:15:33Z

2

You can modify default component behavior to use template from base class, e.g.

function MyComponent(cfg: any) {
  return function (constructor: Function) {
    let base = (Object.getPrototypeOf(constructor.prototype).constructor);
    cfg.template = (<any>base).__annotations__[0].template;
    return Component(cfg)(constructor);
  }
}

@MyComponent({
  selector: 'my-app-child',
  styleUrls: ['./app.component.css']
})
export class AppChildComponent extends AppComponent {

}

a simple demo https://stackblitz.com/edit/angular-swaanp?file=src%2Fapp%2Fapp.component.ts

PS I don't recommend this approach :)

answered Mar 12, 2019 at 19:15

ABOS

3,8413 gold badges19 silver badges25 bronze badges

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

1 Comment

Scaraux Over a year ago

Interesting. Thanks for your share.

Collectives™ on Stack Overflow

Angular component inheritance, keep parent html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related