@Component({
selector: 'base-comp',
template: '<div>hello</div>' <-- how to get this
})
export class BaseComponent {
someMethod( ) {
<-- referenced here
}
Is there a way to access the entire template instead of just using ViewChild to select a child element?
In my use case, I have numerous components that inherit shared functions from this base component, such as date parsing/formatting. Some of these components also share loading and error state configuration code across HTML, CSS, and TypeScript files. Moving all of this common code to one place seems like a good idea, which is why I thought using this shared base component would be useful.
constructor(
private readonly selfRef?: ElementRef,
) {
if (this.selfRef) {
// attach this.template containing loading & error state html
// via Renderer2 or .nativeElement or something
}
}
The concept is to define a constructor in the base class and then attach it to the extending component's elementRef to consolidate the code into one location. The CSS for this involves a position: absolute overlay to cover the extending component.
I am also open to alternative solutions or suggestions for this task. Thank you!