Custom InjectionToken + Hierarchical Providers

Demonstrates DI hierarchy resolution: root → parent → child injector override.

Root Level

Default config via providedIn: 'root'

Root Injector (Default)

API URL: https://api.default.example.com
Version: 1.0.0

Parent Component

Provides its own APP_CONFIG value

Parent Component (Override)

API URL: https://api.parent.example.com
Version: 2.0.0

Child Component (Override)

API URL: https://api.child.example.com
Version: 3.0.0-beta

Child Component

Overrides parent's APP_CONFIG value

Child Component (Override)

API URL: https://api.child.example.com
Version: 3.0.0-beta

How it works

  1. APP_CONFIG token defined with providedIn: 'root' and factory for defaults
  2. Parent component adds provider to override APP_CONFIG — creates new injector level
  3. Child component adds its own provider — creates another injector level
  4. Each ConfigDisplayComponent injects APP_CONFIG — resolves to nearest provider in hierarchy

HTTP Request Log

0 pending | 0 ok | 0 error
No HTTP requests logged yet