How do you inherit the template from a parent component in angular 4?

Question

How would you inherit the template from a parent component in angular 4? Most materials exemplify overriding the parent component like this:

import { Component } from '@angular/core';
import { EmployeeComponent } from './employee.component';

@Component({
  selector: 'app-employee-list',
  template: `
    <h1>{{heading}}</h1>
    <ul>
      <li *ngFor="let employee of employees">
        {{employee.firstName}} {{employee.lastName}} <br>
        {{employee.email}} <br>
        <button (click)="selectEmployee(employee)">Select</button>
      </li>
    </ul>
  `
})
export class EmployeeListComponent extends EmployeeComponent {
  heading = 'Employee List';
}

but I want to inherit the template from EmployeeComponent, instead of overriding it with my own custom version. How can this be achieved?

You can't. Angular is not built to extend components, the typical pattern is to compose them. — Ingo Bürk
– Ingo Bürk, Commented Mar 14, 2018 at 7:09
I think you can use parent child interaction angular.io/guide/component-interaction — Lakindu Gunasekara
– Lakindu Gunasekara, Commented Mar 14, 2018 at 7:13
What do you want to achieve by doing so? As LakinduGunasekara already suggested can be used for interaction between components or you can also use services. — Zaker
– Zaker, Commented Mar 14, 2018 at 7:20
@IngoBürk actually it IS built to extend components. You cannot extend parent's template and style, but what you do have is component inheritance (inputs, outputs, host bindings etc.), which is very useful sometimes. — JeB
– JeB, Commented Mar 14, 2018 at 7:37

user4676340 · Accepted Answer · 2018-03-14 07:30:53Z

17

Since you have a child component, you could place it in the parent's directory, and give it an URL that references the parent.

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

answered Mar 14, 2018 at 7:30

user4676340

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

2 Comments

C.M. Over a year ago

So obvious yet I didn't think of it. Thanks.

Firanto Over a year ago

Agree. Template is not inherited. But if we want to use the same exact template, we can just load that exact template.

Const · Accepted Answer · 2019-08-05 10:34:37Z

1

if you want to add something to parent template you can just plus it

@Component({
  selector: 'child',
  template: require('/path/to/child-template.html') + require('/path/to/parent-template.html')
})

(it is using webpack)

answered Aug 5, 2019 at 10:34

Const

193 bronze badges

2 Comments

Zoltan Rakottyai Over a year ago

It does not work out of the box with Angular v11 This would need a html-loader to be configured in webpack. Unfortunately, Pug (ex Jade) template engine might be a solution for including partial templates (check tutoria here: smashingmagazine.com/2020/05/angular-templates-pug/l) However, the Pug loader for Angular doesn't support template inheritance...

savke Over a year ago

@Const how is it possible to add two templates and get the one original template?

Collectives™ on Stack Overflow

How do you inherit the template from a parent component in angular 4?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related