angular/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.html

<th>{{label()}}</th>
<td>
  @switch (type()) {
    @case ('flag') {
      <span [class]="rowValue() ? 'tag-active' : 'tag-inactive'">
        {{ rowValue() || 'false' }}
      </span>
    }
    @case ('list') {
      @for (provider of dataArray(); track $index) {
        <div class="value-container">
          <span>{{ provider || '[empty string] ' }}</span
          ><ng-container
            [ngTemplateOutlet]="actionBtn"
            [ngTemplateOutletContext]="{ value: provider }"
          />
        </div>
      }
    }
    @default {
      <div class="value-container">
        <span>
          @if (rowValue() && renderValueAsJson()) {
            {{ rowValue() | json }}
          } @else {
            {{ rowValue() || '[empty string] ' }}
          }</span
        ><ng-container
          [ngTemplateOutlet]="actionBtn"
          [ngTemplateOutletContext]="{ value: rowValue() }"
        />
      </div>
    }
  }
</td>

<ng-template #actionBtn let-value="value">
  @if (actionBtnType() !== 'none') {
    <button
      ng-button
      btnType="icon"
      (click)="actionBtnClick.emit(value)"
      [matTooltip]="!actionBtnDisabled() ? actionBtnTooltip() || value : null"
      [disabled]="actionBtnDisabled()"
    >
      @switch (actionBtnType()) {
        @case ('view-source') {
          <mat-icon class="view-source">code</mat-icon>
        }
        @case ('navigate') {
          <mat-icon class="navigate">output</mat-icon>
        }
      }
    </button>
  }
</ng-template>