Dmn diagram in angular 8?

did any one try to edit dmn diagrams using Angular (8) ? I’m able to load the diagram and display the tabs, but when i click the next tabs, canvas is not refreshing with tab content.
can someone point me to any help/documentation URLs please…

We do not have an official example for using dmn-js in an Angular App. Can you maybe share your setup / your code base so we have the chance to understand what’s going on?

Hello Kiefer,
Sorry for not responding to your request. I’m able to solve this bysubscribing to
Please see the following code

// following is my UI element to display DMN Diagram
@ViewChild('ref', { static: false }) private el: ElementRef;

//following is my constructor code
this.dmnDiagramModeler.on('import.done', ({ error, warnings }) => {
      if (!error) {
        const activeEditor = this.dmnDiagramModeler.getActiveViewer();
        const canvas = activeEditor.get('canvas');
        const view = this.dmnDiagramModeler.getViews()[0];;

        // Rendering tabs using angular Dynamic Component and a directive
        this.dmnDiagramTabsCompFactory = this.componentFactoryResolver.resolveComponentFactory(DmnDiagramTabsComponent);
        this.hostViewContainerRef = this.tabsDirectiveHost.viewContainerRef;
        this.tabsComponentRef = this.hostViewContainerRef.createComponent(this.dmnDiagramTabsCompFactory);
        this.tabsComponentRef.instance.views = this.dmnDiagramModeler.getViews();
        this.tabClickSub = this.tabsComponentRef.instance.tabClick.subscribe(aView => {
        // following "import.render.complete" solve my issue
        this.dmnDiagramModeler.on('import.render.complete', (aNewView,err,wrngs) => {
             const activeEditor1 = this.dmnDiagramModeler.getActiveViewer();

My Directive DmnDiagramTabsHolderDirective

import { Directive, ViewContainerRef } from '@angular/core';

  selector: '[jhiDmnDiagramTabsHolder]'
export class DmnDiagramTabsHolderDirective {
  constructor(public viewContainerRef: ViewContainerRef) {}

My Tabs Component DmnDiagramTabsComponent
for dynamic rendering the tabs

import { Component, Input, Output, EventEmitter } from '@angular/core';

  selector: 'jhi-dmn-diagram-tabs-component',
  templateUrl: './dmn-diagram-tabs-component.html',
  styleUrls: ['./dmn-diagram-tabs-component.scss']
export class DmnDiagramTabsComponent {
  @Input() views: [];
  @Output() tabClick = new EventEmitter<any>();
  activeTabId = 0;

    drd: 'dmn-icon-lasso-tool',
    decisionTable: 'dmn-icon-decision-table',
    literalExpression: 'dmn-icon-literal-expression'

  getClassName(aView: any) {
    return this.CLASS_NAMES[aView.type];

  onTabClick(aView: any, tabIndex: number) {
    this.activeTabId = tabIndex;

Tabs HTML for my above tabs component

    <div class="editor-tabs">
        <div *ngFor="let aView of views; index as i" 
            [ngClass]="(i==activeTabId)?'tab active':'tab'" 
            data-id="{{ i }}" 
                <span [class]="getClassName(aView)"></span>
                {{ }}

My main HTML where the DMN is displayed

<div class="row"  class="editor-parent">
   <div #ref class="editor-container">
      <ng-template jhiDmnDiagramTabsHolder></ng-template>

Please mark this question as SOLVED
If anyone has any questions on how to render DMN diagram and decisiont ables using Angular 8, can drop a message to me here

Hi @mallesh,

How can I delete the pre-rendered DMN table present in canvas and then import a new one?