network-legend.component.html

<div class="legend" [class.right]="this.legendConfig.legendPos === 'right'">

  <!-- default legend in html -->
  <table *ngIf="!this.legendConfig.legendUrl.length">
    <ng-container *ngIf="this.legendConfig.showLegendNodes">
      <tr *ngFor="let nodeGroup of this.legendConfig.nodeGroups | keyvalue" class="list-item">

        <ng-container *ngIf="!analysis && nodeGroup.key">
          <ng-container *ngIf="nodeGroup.value.image">
            <!-- group icon given, use icon in legend -->
            <td>
              <img [src]="nodeGroup.value.image" class="legend-icon"/>
            </td>
            <td>&nbsp;{{ nodeGroup.value.groupName }}</td>
          </ng-container>

          <ng-container *ngIf="!nodeGroup.value.image" [ngSwitch]="nodeGroup.value.shape">
            <!-- no image given, create icon programmatically -->
            <td *ngSwitchCase="'text'">
              <span class="node {{ nodeGroup.value.shape }}">
                text
              </span>
            </td>
            <td *ngSwitchCase="'triangle'">
              <span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color>
              </span>
            </td>
            <td *ngSwitchCase="'triangleDown'">
              <span class="node {{ nodeGroup.value.shape }}" [style.border-top-color]=nodeGroup.value.color>
              </span>
            </td>
            <td *ngSwitchCase="'diamond'">
              <span class="node {{ nodeGroup.value.shape }}" 
                    [style.background-color]=nodeGroup.value.color
              >
              </span>
            </td>
            <td *ngSwitchCase="'star'">
              <span class="node {{ nodeGroup.value.shape }}"
                    [style.border-bottom-color]=nodeGroup.value.color
                    [style.color]=nodeGroup.value.color
              >
              </span>
            </td>
            <td *ngSwitchCase="'circle'">
              <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color>
              ...
              </span>
              </td>
            <td *ngSwitchDefault>
              <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color>
              </span>
              </td>
            <td>&nbsp;{{ nodeGroup.value.groupName }}</td>
          </ng-container>
        </ng-container>

      </tr>
    </ng-container>

    <ng-container *ngIf="this.legendConfig.showLegendEdges">
      <tr *ngFor="let edgeGroup of this.legendConfig.edgeGroups | keyvalue" class="list-item">
        <td>
          <hr *ngIf="!edgeGroup.value.dashes" class="edge" [style.background-color]=edgeGroup.value.color>
          <hr *ngIf="edgeGroup.value.dashes" class="edge dashes" [style.color]=edgeGroup.value.color>
        </td>
        <td>&nbsp;{{ edgeGroup.value.groupName }}</td>
      </tr>
    </ng-container>
  </table>


  <!-- custom legend image if url given by user -->
  <img *ngIf="this.legendConfig.legendUrl.length" [src]="this.legendConfig.legendUrl" [ngClass]="this.legendConfig.legendClass"/>

</div>