Angular pass and override context in component hierarchy

Question

I'm trying to make a hierarchy of components. There's a global "CONTEXT" object (provided at NgModule level), but I want one component to be able to override this object for their children. The "CONTEXT" object is currently obtained by injection, like this:

NgModule           ---> Provides default "CONTEXT" for injection
<comp1>
   <comp2>
       <comp3>     ---> Overrides CONTEXT.someProp
           <comp4>
               <comp5>
               <comp5>
           <comp4>
       <comp3>
   <comp2>
<comp1>

No component is aware of the others' existence (they're created dynamically), but comp3 should be able to control/change what context"see" its appointed children (comp4 and comp5 in this case).

I guess injection is not the best pattern here (how can I do it? Should comp3 extend CONTEXT?), at the very least because it would be pseudo-static (could Angular detect and propagate the change of a setting after creation?). Perhaps an Observable could help here.

I've seen this answer but I don't think it's the same case.

What would be the best way to achieve this? I'd like to avoid using explicit @Input properties because the intermediate components should be as agnostic as possible. Is there a common pattern to follow, here?

Answer 1

Strict component hierarchy suggests that this can be solved with hierarchical injectors.

A provider that needs to be configured differently in different components can be specified in child injector in order to be reinstantiated. The need for provider configuration suggests that there should be another configuration provider (see this answer for configuration recipes). For example, a provider with mandatory configuration, like auth service:

export const SOME_CONFIG = new InjectionToken('someConfig');

@Injectable
export class SomeService {
  config: IConfig;
  constructor(@Optional() @Inject(SOME_CONFIG) someConfig) {
    this.config = {
      /* default config goes here */,
      ...someConfig
    };
  }

  updateConfig(config) {
    return Object.assign(this.config, config);
  }

  ...
}

@NgModule({
  ...
  providers: [
    SomeService,
    { provide: SOME_CONFIG, useValue: { /* global config */ }
  ] 
})
export class AppModule {}

And a new instance can be created with another configuration for a component:

@Component({
  providers: [
    SomeService,
    { provide: SOME_CONFIG, useValue: { /* local config */ }
  ] 
})
class FooComponent {...}