angular/devtools/projects/ng-devtools/src/lib/devtools.component.html

<div class="devtools mat-typography mat-app-background" style="height: 100%;">
  @switch (angularStatus) {
    @case (AngularStatus.EXISTS) {
      @if (angularIsInDevMode) {
        @if (supportedVersion()) {
          <div class="devtools-wrapper noselect" [@enterAnimation]>
            <ng-devtools-tabs (frameSelected)="inspectFrame($event)" [isHydrationEnabled]="hydration" [angularVersion]="angularVersion()"></ng-devtools-tabs>
          </div>
        } @else {
          <p class="text-message">
            Angular Devtools only supports Angular versions 12 and above
          </p>
        }
      } @else {
        <p class="text-message" matTooltip="A dev build is when the `optimization` flag is set to `false` in the angular.json config file.">
          We detected an application built with production configuration. Angular DevTools only supports development build.
        </p>
      }
    }
    @case (AngularStatus.DOES_NOT_EXIST) {
      <p class="text-message not-detected">
        <span class="info-icon" matTooltip="You see this message because the app is still loading, or this is not an Angular application">i</span>
          Angular application not detected.
      </p>
    }
    @case (AngularStatus.UNKNOWN) {
      <div class="initializing">
        <div class="loading">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="120">
            <g clip-path="url(#a)">
              <path fill="url(#b)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"></path>
              <path fill="url(#c)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"></path>
            </g>
            <defs>
              <linearGradient id="b" x1="49.009" x2="225.829" y1="213.75" y2="129.722" gradientUnits="userSpaceOnUse">
                <stop stop-color="#E40035"></stop>
                <stop offset=".24" stop-color="#F60A48"></stop>
                <stop offset=".352" stop-color="#F20755"></stop>
                <stop offset=".494" stop-color="#DC087D"></stop>
                <stop offset=".745" stop-color="#9717E7"></stop>
                <stop offset="1" stop-color="#6C00F5"></stop>
              </linearGradient>
              <linearGradient id="c" x1="41.025" x2="156.741" y1="28.344" y2="160.344" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FF31D9"></stop>
                <stop offset="1" stop-color="#FF5BE1" stop-opacity="0"></stop>
              </linearGradient>
              <clipPath id="a">
                <path fill="#fff" d="M0 0h223v236H0z"></path>
              </clipPath>
            </defs>
          </svg>
        </div>
      </div>
    }
  }
</div>