feat(devtools): add detected application angular version to top right next to tabs (rangle/angular-devtools#4)

projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.css

@@ -39,6 +39,15 @@
   fill: #2a76e4;
 }
 
+#app-angular-version {
+  position: absolute;
+  top: 20px;
+  right: 10px;
+  font-size: 11px;
+  font-weight: bold;
+  color: #5128a5;
+}
+
 /deep/ .mat-tab-body-wrapper {
   height: calc(100% - 49px); /* 100% - header */
 }

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

@@ -32,3 +32,7 @@
     </g>
   </svg>
 </button>
+
+<section *ngIf="angularVersion" id="app-angular-version">
+  Angular version: {{angularVersion}}
+</section>

projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts

@@ -10,6 +10,7 @@ import { ComponentExplorerComponent } from './component-explorer/component-explo
 })
 export class DevToolsTabsComponent {
   @Input() messageBus: MessageBus<Events>;
+  @Input() angularVersion: string | undefined = undefined;
   @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
   @ViewChild(ComponentExplorerComponent) componentExplorer: ComponentExplorerComponent;
 

projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 import { DevToolsTabsComponent } from './devtools-tabs.component';
 
@@ -8,7 +9,7 @@ import { ProfilerModule } from './component-explorer/profiler/profiler.module';
 
 @NgModule({
   declarations: [DevToolsTabsComponent],
-  imports: [MatTabsModule, ComponentExplorerModule, ProfilerModule],
+  imports: [MatTabsModule, ComponentExplorerModule, ProfilerModule, CommonModule],
   exports: [DevToolsTabsComponent]
 })
 export class DevToolsTabModule {}

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

@@ -1,6 +1,6 @@
 <ng-container *ngIf="angularExists === true; else errorOrLoad">
   <div class="devtools-wrapper noselect">
-    <ng-devtools-tabs [messageBus]="messageBus"></ng-devtools-tabs>
+    <ng-devtools-tabs [messageBus]="messageBus" [angularVersion]="angularVersion"></ng-devtools-tabs>
   </div>
 </ng-container>
 <ng-template #errorOrLoad>

projects/ng-devtools/src/lib/devtools.component.ts

@@ -9,6 +9,7 @@ import { interval } from 'rxjs';
 })
 export class DevToolsComponent implements OnInit, OnDestroy {
   angularExists: boolean | null = null;
+  angularVersion: string | undefined = undefined;
   @Input() messageBus: MessageBus<Events>;
 
   private _interval$ = interval(500).subscribe(() => this.messageBus.emit('queryNgAvailability'));
@@ -18,6 +19,7 @@ export class DevToolsComponent implements OnInit, OnDestroy {
 
     this.messageBus.once('ngAvailability', ({ version }) => {
       this.angularExists = !!version;
+      this.angularVersion = version;
       this._interval$.unsubscribe();
     });
   }