Hi there,
Custom renderer in angular can be used wherever renderer function
is available. The implementation for taskRenderer
is similar to the one's we have here https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/angular/guide#using-angular-components-as-renderers . You just need to define a custom component like this:
import { Component, Input } from '@angular/core';
@Component({
selector : 'app-task-renderer',
template : `
<div class="custom-task-renderer">
<h3>{{name}}</h3>
</div>
`
})
export class TaskRendererComponent {
@Input() name : string;
}
Create a custom element in the app.module.ts
file, something like this:
import { Injector, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BryntumTaskBoardModule } from '@bryntum/taskboard-angular';
import { TaskRendererComponent } from './task-renderer/task-renderer.component';
import { createCustomElement } from '@angular/elements';
@NgModule({
declarations : [
AppComponent,
TaskRendererComponent
],
imports : [
BrowserModule,
BryntumTaskBoardModule
],
providers : [],
bootstrap : [AppComponent]
})
export class AppModule {
constructor(injector: Injector) {
// convert Angular Components to Custom Elements and register them with the browser
customElements.define('task-renderer', createCustomElement(TaskRendererComponent, { injector }));
}
}
Now you need to use the custom renderer in the app.config.ts
:
taskRenderer : ({ cardConfig }) => {
cardConfig.children.body.html = `
<task-renderer
name="${StringHelper.encodeHtml('Hello')}"
></task-renderer>
`;
},
Also add it in the markup file app.component.html
:
[taskRenderer] = "taskBoardConfig.taskRenderer"
Screenshot 2024-01-11 at 4.32.28 PM.png (59.42 KiB) Viewed 1276 times
Here's the example code:
Regards,
Ghous