refactor(devtools): inject number and symbol values with injection tokens (#56898)

Handle injecting number and symbol values with injection tokens and update contributing file

PR Close #56898

CONTRIBUTING.md

@@ -207,7 +207,7 @@ To ensure consistency throughout the source code, keep these rules in mind as yo
 * All public API methods **must be documented**.
 * We follow [Google's TypeScript Style Guide][ts-style-guide], but wrap all code at **100 characters**.
 
-   An automated formatter is available, see [DEVELOPER.md](contributing-docs/building-and-testing-angular.md#formatting-your-source-code).
+   An automated formatter is available, see [building-and-testing-angular.md](./contributing-docs/building-and-testing-angular.md#formatting-your-source-code).
 
 
 ## <a name="commit"></a> Commit Message Guidelines

devtools/projects/demo-standalone/src/app/demo-app/demo-app.component.ts

@@ -14,6 +14,7 @@ import {
   ElementRef,
   EventEmitter,
   inject,
+  InjectionToken,
   Injector,
   Input,
   Output,
@@ -30,6 +31,9 @@ import {ZoneUnawareIFrameMessageBus} from '../../../../../src/zone-unaware-ifram
 import {HeavyComponent} from './heavy.component';
 import {ZippyComponent} from './zippy.component';
 
+const NUMBER_TOKEN = new InjectionToken<number>('number-token');
+const SYMBOL_TOKEN = new InjectionToken<Symbol>('symbol-token');
+
 @Component({
   selector: 'app-demo-component',
   templateUrl: './demo-app.component.html',
@@ -37,8 +41,15 @@ import {ZippyComponent} from './zippy.component';
   encapsulation: ViewEncapsulation.None,
   imports: [HeavyComponent, RouterOutlet, JsonPipe],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [
+    {provide: NUMBER_TOKEN, useValue: 42},
+    {provide: SYMBOL_TOKEN, useValue: Symbol('symbol_token')},
+  ],
 })
 export class DemoAppComponent {
+  readonly myNumber = inject(NUMBER_TOKEN);
+  readonly mySymbol = inject(SYMBOL_TOKEN);
+
   @ViewChild(ZippyComponent) zippy!: ZippyComponent;
   @ViewChild('elementReference') elementRef!: ElementRef;
 

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

@@ -402,6 +402,10 @@ const valueToLabel = (value: any): string => {
     return stripUnderscore(value.name);
   }
 
+  if (typeof value !== 'string') {
+    return String(value);
+  }
+
   return stripUnderscore(value);
 };