Injecting dynamic templates in Angular 7

Question

Injecting dynamic templates in Angular 7

Let me simplify my issue:

I am currently using NgxDatatable to display a CRUD table.
I have a base component named CrudComponent, which manages all CRUD operations.
This component was designed to be extended for all basic entities.

The challenge I am encountering now is finding a way for child components to somehow inject custom cellTemplate.

I want to avoid duplicating code, so I don't have to repeatedly copy the parent template just to add 1-2 ng-template.

For instance, in CrudComponent:

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

And in the 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>

If I extend this CrudComponent with MovieComponent, I'd have to manually copy the entire HTML template into the new MovieComponent.html file 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>

Potential solutions:

One approach could be utilizing a template pre-compiler like twig. Is this feasible? If so, how?
Or a more Angular-centric solution. Essentially creating a table of TemplateRef<any> instances like this:

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

Then in the NgxDatatable columns definition:

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

OR perhaps there's another, more elegant way to address this concern?

angular typescript angular7 ngx-datatable

Answer 1

Answer №1

After deciding to remove NgxDatatable, I took the initiative to create my own version of CrudTable and integrated a new component called 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;
    }
}

Answer 2

After deciding to remove NgxDatatable, I took the initiative to create my own version of CrudTable and integrated a new component called 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;
    }
}

Injecting dynamic templates in Angular 7

Answer №1

Similar questions

Managing CORS in Angular2 for REST WebApi calls

Using Typescript to Define Mongoose Schemas

The ngbDatepicker within the Bootstrap angular framework is designed to seamlessly integrate with ngbPanelContent without causing overflow issues

Strict mode error occurs when attempting to assign a value to ngComponentOutlet that is incompatible with the type of the lazy-loaded component

Ways to invoke a slice reducer from a library rather than a React component

The 'zone' property is not recognized on the 'Observable<{}>' data type

What Type of state does Typescript expect in React?

In Angular 2+, as you loop through an array of objects, make sure to create a new row (<tr>) for each property of the object

Having difficulties generating ngc and tsc AOT ES5 compatible code

Experimenting with Nuxtjs application using AVA and TypeScript

Is it possible to utilize an array of numbers as a data source in ng2-smart table?

Deleting items with a swipe gesture in Angular 10

Lack of Intellisense in Sveltekit for the generated $types module on WebStorm

Angular: Reacting to events with SVG attributes

Discover a component-sharing feature within Angular 2

Creating asynchronous JavaScript constructors using a static method called "create" presents challenges when dealing with TypeScript types

What causes the Babel JSON configuration error to appear in my project?

Guide for installing the uncompressed version of Angular2 with NPM

Transform the MUI Typescript Autocomplete component to output singular values of a specific property rather than a complete object

I aim to link a variable in a directive with a component