diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.css b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.css
index 027f1e0cfd1..e2571fd898d 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.css
+++ b/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 */
}
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
index b32f4ac1ddd..2033a2f2935 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
+++ b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
@@ -32,3 +32,7 @@
+
+
+ Angular version: {{angularVersion}}
+
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
index fafcd5b6df0..49d88fea5b7 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
+++ b/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;
+ @Input() angularVersion: string | undefined = undefined;
@ViewChild(MatTabGroup) tabGroup: MatTabGroup;
@ViewChild(ComponentExplorerComponent) componentExplorer: ComponentExplorerComponent;
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
index f53616325c3..98041f1f8d6 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
+++ b/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 {}
diff --git a/projects/ng-devtools/src/lib/devtools.component.html b/projects/ng-devtools/src/lib/devtools.component.html
index c582cbd1595..a0c1d3d5a99 100644
--- a/projects/ng-devtools/src/lib/devtools.component.html
+++ b/projects/ng-devtools/src/lib/devtools.component.html
@@ -1,6 +1,6 @@
-
+
diff --git a/projects/ng-devtools/src/lib/devtools.component.ts b/projects/ng-devtools/src/lib/devtools.component.ts
index ea50becf654..95abb23822f 100644
--- a/projects/ng-devtools/src/lib/devtools.component.ts
+++ b/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;
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();
});
}