Наследование компонентов и их шаблонов

Наследование классов компонентов осуществляется через extends
template так не наследуется

Parent component

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Phone } from './phone';

@Component({
  selector: 'comp-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [DataService]
})
export class AppComponent implements OnInit {

  items: Phone[] = [];
  constructor(public dataService: DataService) { }

  addItem(name: string, price: number) {
    this.dataService.addData(name, price);
  }
  ngOnInit() {
    this.items = this.dataService.getData();
  }
}

Child componenent

import { Component, OnInit } from '@angular/core';
import { AppComponent } from './app.component';

// Получаем опции родительского компонента
const parentComponentOptions = (AppComponent).__annotations__[0];
const childComponentOptions = Object.assign(
    {},
    {
        template: parentComponentOptions['template'],
        providers: parentComponentOptions['providers']
    },
    { selector: 'spec-root' }
);

@Component(childComponentOptions)

export class AppSpecComponent extends AppComponent implements OnInit {
    addItem(name: string, price: number) {
        this.dataService.addData(name, price / 2);
    }
}

В данном случае Child компонент использует шаблон родительского компонента
Это можно сделать вместо того, чтобы ссылаться на ‘./app.component.html’ через styleUrls.

Оригинал: https://stackblitz.com/edit/angular-6-component-template-inheritance?file=src%2Fapp%2Fchild%2Fchild.component.ts