How can I implement a custom button?

In an Angular9 application, I am creating a Timeline and would like to add some action buttons ('OK', 'cancel'...). But when I write the function in HTML, Angular removes the javascript for safety. How to implement javasript buttons or calls from a TimelineJS event?

Button implementation:

private getButtons(acaoPlano: AcaoPlano): string {
let o = '';
o += '<div class="timeline-row">';
o += ` <div class="btn-top-space">
<button class='timeline-button timeline-button-secondary'>Cancelar</button>
<button class='timeline-button timeline-button-success btn-left-space' id='botao-realizar'>Realizar</button>
</div>`;
o += '</div>'

return o;
}


The only way I could make it work was the following, but although it worked, I found it very gimmicky. Does anyone know another way to do it?

private timelineDidLoad(): void {
this.setupIframeOnClickHandler();
}


private setupIframeOnClickHandler(): void {
$('a[target="timelineIframeClickHijacker"]').bind('click', this.setupIframeOnClickHandlerImpl.bind(this));
}

private setupIframeOnClickHandlerImpl(e: any): void {
const params = e.target.attributes.href;
this.executarFuncaoDaTimeline(params);

e.stopPropagation();
setTimeout(() => {
const timelineIframeClickHijacker: any = document.getElementById('timelineIframeClickHijacker');
timelineIframeClickHijacker.src = '';
}, 0);
}

private executarFuncaoDaTimeline(data: any): void {
if ( data?.nodeValue ) {
console.log('data.nodeValue', data.nodeValue);
}
this.toasterService.warning('Esta funcionalidade está em desenvolvimento.', 'Por favor, tente novamente dentro de alguns dias!');
}

Continue reading...