Angular 7 Dynamic injectible templates

Question

I will try to explain my problem as simple as possible:

1. I am currently using NgxDatatable to render a crud table.
2. I have a base component called CrudComponent to handle all crud stuff
3. This component was meant to be extended for all simple entities

The problem I am facing right now is to provide a way for descendants to inject somehow custom cellTemplate.

I am trying to avoid code duplication so I don't have to copy parent template all over again just to add 1-2 ng-template.

For example I have in CrudComponent:

    @ViewChild('actionsCellRenderer') actionsCellRenderer: TemplateRef<any>;

And in template:

    <ng-template #actionsCellRenderer let-row="row" let-value="value">
        <button mat-icon-button (click)="startEdit(row)">
            <fa-icon [icon]="['far', 'edit']"></fa-icon>
        </button>
        <button mat-icon-button (click)="startDelete(row)" color="warn">
            <fa-icon [icon]="['far', 'trash-alt']"></fa-icon>
        </button>
    </ng-template>

And lets say I extend this CrudComponent with MovieComponent. I would need to manually copy whole html template into new MovieComponent.html template and add:

    @ViewChild('ratingCellRenderer') ratingCellRenderer: TemplateRef<any>;

    <ng-template #ratingCellRenderer let-row="row" let-value="value">
        <bar-rating
                [(rate)]="value"
                [max]="10"
                theme="horizontal"
                readOnly="true"
        ></bar-rating>
    </ng-template>

---

Possible solutions:

1. One solution to this problem would be to use some template pre-compiler like twig. Is this even possible? If so, how?
2. Or more angular solution. Basically a table of TemplateRef<any> like this:

cellRenderers = {
   rating: new TemplateRef<any>(), //but how do I manually create TemplateRef?
   picture: new TemplateRef<any>(),
}

Then in NgxDatatable columns definition:

{name: 'Score', prop: 'score', cellTemplate: this.cellRenderers['rating']},

3. OR maybe there is another, more elegant way to handle this?

Answer 1

I ended up removing NgxDatatable and writing my own implementation of CrudTable which has ColumnRendererComponent:

import {Component, ComponentFactoryResolver, Input, OnInit, ViewChild, ViewContainerRef} from '@angular/core';
import {TableColumnType} from '../Table/TableColumnType';
import {FieldConfig} from '../../../Interface/FieldConfig';
import {RendererInterface} from './RendererInterface';
import {PlainRenderer} from './PlainRenderer';
import {FunctionRenderer} from './FunctionRenderer';

@Component({
    selector: 'column-renderer',
    template: `<ng-template #renderer></ng-template>`
})
export class ColumnRendererComponent implements OnInit {
    @Input() public value: any;
    @Input() public row: any;
    @Input() public column: FieldConfig;
    @Input() public columnType: TableColumnType;

    constructor(
        protected componentFactoryResolver: ComponentFactoryResolver,
        public viewContainerRef: ViewContainerRef
    ) {
    }

    ngOnInit(): void {
        this.loadRenderer();
    }

    loadRenderer() {
        let component = this.columnType.template ? this.columnType.template :
            (this.columnType.renderFn ? FunctionRenderer : PlainRenderer);
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);

        let viewContainerRef = this.viewContainerRef;
        viewContainerRef.clear();

        let componentRef = viewContainerRef.createComponent(componentFactory);
        let instance = <RendererInterface>componentRef.instance;
        instance.column = this.column;
        instance.columnType = this.columnType;
        instance.row = this.row;
        instance.value = this.value;
    }
}