How to use the html of the base class in angular

Question

I want to create a base component in my angular app from which other components will extend. I want to use for html, ts and scss a seperate file. In this base component I want to create depending on the data a table.

This table i want to use in the components which extend from this base component. I haven't found out how I can use this html-table in other components.

My question is: How can I use the base component's html in other components?

I've searched for ways to use the base component's html in other components and tried to implement this base-class.

Answer 1

I wouldn't do that but if you want you can get the css and html from the base component while using the extended component

import { Component } from '@angular/core';
import { BaseComponent } from './path-to-base-component';

    @Component({
      templateUrl: './path-to-base.component.html', // Use base component's template
      styleUrls: ['./path-to-base.component.scss']  // Use base component's styles
    })
    export class DerivedComponent extends BaseComponent {
      // Additional logic or overrides here
    }

 

I would create a table component that gets the values and add it to the required page as

<app-table [value]="value"></app-table>