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

<div class="filter">
  <input (input)="searchRoutes($event)" placeholder="Search routes" class="ng-input filter-input" />
  <div class="show-full-path">
    <input id="show-full-path" type="checkbox" (change)="togglePathSettings()" />
    <label for="show-full-path">Show full path</label>
  </div>
</div>
<as-split unit="percent" direction="horizontal" [gutterSize]="9" class="visualization">
  <aside class="legend" aria-hidden="true">
    <ul>
      <li class="eager">Eager-loaded route</li>
      <li class="lazy">Lazy-loaded route</li>
      <li class="active">Active route</li>
    </ul>
  </aside>
  <as-split-area size="70">
    <as-split unit="percent" direction="vertical" [gutterSize]="9">
      <as-split-area size="100">
        <ng-tree-visualizer-host #routerTree />
        <section #routerTree class="router-tree router-graph">
          <svg #routerTreeSvgContainer>
            <g #routerTreeMainGroup></g>
          </svg>
        </section>
      </as-split-area>
    </as-split>
  </as-split-area>

  @let route = selectedRoute();

  @if (route && route.data) {
    <as-split-area size="30" minSize="20">
      <div>
        <div class="selected-node-title">
          <h2 class="router-title">Routes Details</h2>
          <mat-icon
            class="close-icon"
            fontIcon="close"
            (click)="selectedRoute.set(null)"
          ></mat-icon>
        </div>

        <table class="route-details-table">
          <tr
            ng-route-details-row
            label="Path"
            type="chip"
            [data]="route.data.path"
            (click)="navigateRoute(route)"
          ></tr>
          <tr
            ng-route-details-row
            label="Component"
            type="chip"
            [data]="route.data.component"
            (click)="viewComponentSource(route.data.component)"
          ></tr>
          @if (route.data.pathMatch) {
            <tr ng-route-details-row label="Path Match" [data]="route.data.pathMatch"></tr>
          }
          @if (route?.data?.data?.length > 0) {
            <tr ng-route-details-row label="Data" [data]="route.data.data | json"></tr>
          }
          @if (route.data.canActivateGuards && route.data.canActivateGuards.length > 0) {
            <tr
              ng-route-details-row
              label="Can Activate Guards"
              type="list"
              [data]="route.data.canActivateGuards"
              (click)="viewSourceFromRouter($event, 'canActivate')"
            ></tr>
          }
          @if (route.data.canActivateChildGuards && route.data.canActivateChildGuards.length > 0) {
            <tr
              ng-route-details-row
              label="Can Activate Child Guards"
              type="list"
              [data]="route.data.canActivateChildGuards"
              (click)="viewSourceFromRouter($event, 'canActivateChild')"
            ></tr>
          }
          @if (route.data.canDeactivateGuards && route.data.canDeactivateGuards.length > 0) {
            <tr
              ng-route-details-row
              label="Can DeActivate Guards"
              type="list"
              [data]="route.data.canDeactivateGuards"
              (click)="viewSourceFromRouter($event, 'canDeactivate')"
            ></tr>
          }
          @if (route.data.canMatchGuards && route.data.canMatchGuards.length > 0) {
            <tr
              ng-route-details-row
              label="Can Match Guards"
              type="list"
              [data]="route.data.canMatchGuards"
              (click)="viewSourceFromRouter($event, 'canMatch')"
            ></tr>
          }

          @if (route.data.providers && route.data.providers.length > 0) {
            <tr
              ng-route-details-row
              label="Providers"
              type="list"
              [data]="route.data.providers"
              (click)="viewSourceFromRouter($event, 'providers')"
            ></tr>
          }
          @if (route.data.title) {
            <tr ng-route-details-row label="Title" [data]="route.data.title"></tr>
          }
          <tr ng-route-details-row label="Active" type="flag" [data]="route.data.isActive"></tr>
          <tr ng-route-details-row label="Auxiliary" type="flag" [data]="route.data.isAux"></tr>
          <tr ng-route-details-row label="Lazy" type="flag" [data]="route.data.isLazy"></tr>
        </table>
      </div>
    </as-split-area>
  }
</as-split>