How can I add more SVG or Html elements / events to template with Angular 5?

Question

-Except #nodeTemplate and #linkTemplate, how can we add more elements using customTemplate to ngx-graphs?

<ngx-graph id="main_drawing_board" class="chart-container" [view]="view" [legend]="showLegend"
        [links]="hierarchicalGraph.links" (legendLabelClick)="onLegendLabelClick($event)"
        [nodes]="hierarchicalGraph.nodes" [scheme]="colorScheme" [orientation]="orientation" [curve]="curve" (select)="select($event)" [update$]="update$">
        <ng-template #defsTemplate>
        ......................
        </ng-template>

        <ng-template #nodeTemplate let-node>
     .....................
        </ng-template>

        <ng-template #linkTemplate let-link>
    ..............
        </ng-template>

        <ng-template #customTemplate>
          <svg:text x="300" y="200">custom text</svg:text>
        </ng-template>
      </ngx-graph>

Answer 1

Starting from ngx-graph 6.0.0, you can add any arbitrary SVG elements inside the ngx-graph element, next to the ng-template elements, and it will be projected into the graph's SVG element.

Example:

<ngx-graph
  class="chart-container"
  [view]="[500, 550]"
  [links]="[
    {
      id: 'a',
      source: 'first',
      target: 'second',
      label: 'is parent of'
    }, {
      id: 'b',
      source: 'first',
      target: 'c1',
      label: 'custom label'
    }, {
      id: 'd',
      source: 'first',
      target: 'c2',
      label: 'custom label'
    }, {
      id: 'e',
      source: 'c1',
      target: 'd',
      label: 'first link'
    }, {
      id: 'f',
      source: 'c1',
      target: 'd',
      label: 'second link'
    }
  ]"
  [nodes]="[
    {
      id: 'first',
      label: 'A'
    }, {
      id: 'second',
      label: 'B'
    }, {
      id: 'c1',
      label: 'C1'
    }, {
      id: 'c2',
      label: 'C2'
    }, {
      id: 'd',
      label: 'D'
    }
  ]"
  [clusters]="[
    {
      id: 'third',
      label: 'Cluster node',
      childNodeIds: ['c1', 'c2']
    }
  ]"
  layout="dagreCluster"
>
  <ng-template #defsTemplate>
    // defs SVG here
  </ng-template>

  <ng-template #clusterTemplate let-cluster>
    // custer template
  </ng-template>

  <ng-template #nodeTemplate let-node>
    // node template
  </ng-template>

  <ng-template #linkTemplate let-link>
    // link template
  </ng-template>

  // Insert your custom SVG here
</ngx-graph>