Unlocking Angular Internals with reflectComponentType: A Developer’s Cheat Code

Ever wish you could peek inside an Angular component and get all its metadata — dynamically, cleanly, and without relying on brittle decorator parsing? Meet your new secret weapon: reflectComponentType.

Whether you’re building dev tools, smart CLI utilities, or advanced debugging features, this underrated Angular API offers powerful insights — and it’s shockingly easy to use.

---

🔍 What Is reflectComponentType?

reflectComponentType is a utility function introduced by Angular that gives you programmatic access to a component’s internal metadata. Think of it as a built-in mirror that reflects key structural info about any compiled Angular component.

When you call it, it returns a ComponentMirror object that exposes:

• The component class (type)
• Selector
• Inputs and outputs
• Whether it’s a standalone component
• ng-content selectors (i.e., content projection targets)

Perfect for introspection, automation, and tooling. 🔎

---

🧪 Example: Inspecting a Component’s Metadata

Let’s say you’ve defined a component like this:

@Component({
  standalone: true,
  selector: 'foo-component',
  template: `
    <ng-content></ng-content>
    <ng-content select="content-selector-a"></ng-content>
  `
})
class FooComponent {
  inputName = input<string>();
  outputName = output<void>();
}

Now, let’s inspect it:

import { reflectComponentType } from '@angular/core';

const mirror = reflectComponentType(FooComponent);

console.log(mirror.type);               // FooComponent
console.log(mirror.selector);           // 'foo-component'
console.log(mirror.isStandalone);       // true
console.log(mirror.inputs);             // [{ propName: 'inputName', templateName: 'inputName' }]
console.log(mirror.outputs);            // [{ propName: 'outputName', templateName: 'outputName' }]
console.log(mirror.ngContentSelectors); // ['*', 'content-selector-a']

Boom. Instant structural metadata, without parsing strings or fiddling with decorators.

---

🎯 Why It Matters: Real-World Use Cases

1. Reactive Inputs with injectInputs

Tools like ngxtension use reflectComponentType to create injectInputs — which automatically collects all component inputs into a reactive store-like API:

const inputs = injectInputs<FooComponent>();
console.log(inputs().inputName); // reactive access!

No more manually wiring up @Input() properties to local variables.

---

2. Auto-Generated Docs for Your Component Library

Want to generate markdown docs or JSON schemas from your Angular components? With reflectComponentType, you can loop over your components and extract:

• Inputs and outputs
• Selectors
• Content slots (ng-content)
• Standalone status

Ideal for building CLI tools, living style guides, or maintaining a design system.

---

3. Building DevTools & Inspector UIs

Create a debugging UI that can:

• Scan the component tree
• Display input/output bindings in real time
• Show ng-content projection areas visually

This becomes much easier with reflectComponentType as your foundation.

---

4. Angular → Web Components, Dynamically

Want to create dynamic custom elements on the fly? If you can read a component’s selector and know its I/O structure, you can wire up Angular components into a Web Components wrapper programmatically.

---

⚠️ A Few Gotchas

• Runtime only: Works best in dev mode with JIT or partial Ivy metadata.
• Doesn’t read decorators directly — It uses Angular’s compiled internal reflection system.
• Best with standalone components (Angular 15+) for simpler introspection.

---

🛠️ Pro Tip: Build Your Own Inspector Utility

Here’s a reusable helper you can add to your dev toolkit:

import { reflectComponentType, Type } from '@angular/core';

export function inspectComponent<T>(component: Type<T>) {
  const mirror = reflectComponentType(component);
  console.log('Selector:', mirror.selector);
  console.log('Standalone:', mirror.isStandalone);
  console.log('Inputs:', mirror.inputs);
  console.log('Outputs:', mirror.outputs);
  console.log('ng-content slots:', mirror.ngContentSelectors);
}

Use it anywhere to get an instant snapshot of a component’s structure.

---

🧠 Final Thoughts

reflectComponentType is one of those gems that you don’t need every day — but when you do, it can seriously level up your Angular tooling, debugging, and automation game.

It’s especially powerful when combined with Angular’s push toward standalone components and runtime introspection.

So next time you’re building a CLI, design system, or even an in-house dev tool, give reflectComponentType a spin. You’ll wonder how you managed without it.