Thanks to the valuable input from @Rectangular, I approached the problem in the following manner:
In the abstract class:
export const componentDecoratorPreset = {
// selector is not defined here
templateUrl: './abstract-list.component.html',
styleUrls: ['./abstract-list.component.scss']
};
export abstract class AbstractListComponent<T> implements OnInit {
// ...
}
Subsequently, in the implementation:
import { AbstractListComponent, componentDecoratorPreset } from 'src/app/components/_absrtact/list/abstract-list.component';
@Component({
...componentDecoratorPreset,
selector: 'app-my-custom-list',
})
Naturally, this approach did not work as expected due to the relative path specified in the templateUrl which did not correspond to an existing file in the implementation.
Therefore, I attempted to use absolute paths in the abstract class as demonstrated below:
export const componentDecoratorPreset = {
// selector is not defined here
templateUrl: 'src/app/components/_absrtact/list/abstract-list.component.html',
styleUrls: ['src/app/components/_absrtact/list/abstract-list.component.scss']
};
Despite the Angular documentation suggesting the possibility of using relative or absolute paths for templates, I encountered issues with absolute paths. Upon further investigation, I came across an article explaining why absolute paths are not suitable. Nevertheless, I devised a solution inspired by the article:
I created a abstract-list.component.html.ts file with the following content:
export default `<div class="container-fluid">...abstract template content...</div>`
Subsequently, I imported this template as a variable in the abstract class and exported it as an object:
import template from './abstract-list.component.html';
export const componentDecoratorPreset = {
// selector: to be defined in the implementation
template: template as string,
};
Finally, in the implementation:
import { Component, OnInit } from '@angular/core';
import { AbstractListComponent, componentDecoratorPreset } from 'src/app/components/_absrtact/list/abstract-list.component';
import { AddressTypeInterface } from 'src/app/models/address/type/address-type.interface';
import { AddressType } from 'src/app/models/address/type/address-type.model';
@Component({
selector: 'app-address-type-list',
...componentDecoratorPreset
})
export class AddressTypeListComponent extends AbstractListComponent<AddressTypeInterface> implements OnInit {
constructor() {
super(AddressType);
}
}