[ANGULAR] Angular component in a cell's renderer

[cheradee]

Hello,

When using a column's renderer is it possible to put our own custom Angular component to display on a cell?

Thanks,
Chardine

[saki]

What we suggest in this need is to convert Angular components to Custom elements and use them as renderers. The demo of this approach is https://bryntum.com/examples/grid/frameworks/angular/angular-renderer/dist/angular-renderer/index.html

Take a look especially at app.module.ts where are these custom elements created from Angular ones:

/**
 * App module
 */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler, Injector } from '@angular/core';
import { AppErrorHandler } from './error.handler';

import { AppComponent } from './app.component';
import { BryntumGridModule } from '@bryntum/grid-angular';
import { ColorRendererComponent } from './color-renderer/color-renderer.component';
import { TooltipRendererComponent } from './tooltip-renderer/tooltip-renderer.component';
import { HeaderRendererComponent } from './header-renderer/header-renderer.component';

// Needed to convert Angular Component to Custom Element
import { createCustomElement } from '@angular/elements';

@NgModule({
    declarations : [
        AppComponent,
        ColorRendererComponent,
        TooltipRendererComponent,
        HeaderRendererComponent
    ],
    // These component(s) will be converted to Custom Elements
    entryComponents : [
        ColorRendererComponent
    ],
    imports : [
        BrowserModule,
        BryntumGridModule
    ],
    providers : [{ provide : ErrorHandler, useClass : AppErrorHandler }],
    bootstrap : [AppComponent]
})

export class AppModule {
    constructor(injector: Injector) {
        // convert Angular Components to Custom Elements and register them with the browser
        customElements.define('color-renderer', createCustomElement(ColorRendererComponent, { injector }));
        customElements.define('tooltip-renderer', createCustomElement(TooltipRendererComponent, { injector }));
        customElements.define('header-renderer', createCustomElement(HeaderRendererComponent, { injector }));
    }
}