title: How to set config (or useValue) for imported modules from a component?
body: <p>We're well aware that there are various ways of setting config for imported modules. We have '.forRoot()', 'useValue', 'useClass' and such to be used in the importing module.</p>
  
  <p>Say for example, we want to use <a href="https://www.npmjs.com/package/ng2-currency-mask" rel="nofollow noreferrer">ng2-currency-mask</a>. Taking directly from its example usage in the documentation, we can set the configuration for <code>CurrencyMaskModule</code> by doing this in the importing module (AppModule in this case):</p>
  
  <pre><code>export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
      align: "right",
      allowNegative: true,
      decimal: ",",
      precision: 2,
      prefix: "Module$ ",
      suffix: "",
      thousands: "."
  };
  
  @NgModule({
      imports: [
          ...
          CurrencyMaskModule
      ],
      declarations: [...],
      providers: [
          { provide: CURRENCY_MASK_CONFIG, useValue: CustomCurrencyMaskConfig }
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>However, if you want to set the config/<code>useValue</code> dynamically (e.g. a Settings page), we have to change it from within a component. Now I tested doing so with the following code written directly in the <code>AppComponent</code>:</p>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import { CURRENCY_MASK_CONFIG, CurrencyMaskConfig } from 'ng2-currency-mask/src/currency-mask.config';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit {
    title = 'Testing Config App';
  
    constructor(
      @Inject(CURRENCY_MASK_CONFIG) ng2CurrencyMaskConfig: CurrencyMaskConfig,
    ) {
      // test
      ng2CurrencyMaskConfig =  {
        align: 'right',
        allowNegative: false,
        decimal: '.',
        precision: 5,
        prefix: 'Component$$$ ',
        suffix: '',
        thousands: ','
      };
    }
  
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>Unfortunately, the change did not reflect to the components using <code>ng2-currency-mask</code> and the config set from the <code>AppModule</code> (the one with "Module$ " as <code>prefix</code>) is still what is working.</p>
  
  <p>How do you successfully override/set a module's config from within a component?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I have tried using <code>ReflectiveInjector</code>'s <code>resolve</code> and <code>fromResolvedProviders</code> methods which doesn't also work:</p>
  
  <pre><code>import { Component, OnInit, ReflectiveInjector, Injector } from '@angular/core';
  import { CURRENCY_MASK_CONFIG, CurrencyMaskConfig } from 'ng2-currency-mask/src/currency-mask.config';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit {
    title = 'Testing Config App';
  
    constructor(
      private injector: Injector,
    ) {
    }
  
    ngOnInit() {
       // test
       const ng2CurrencyMaskConfig: CurrencyMaskConfig =  {
        align: 'right',
        allowNegative: false,
        decimal: '.',
        precision: 3,
        prefix: 'TESTR$ ',
        suffix: '',
        thousands: ','
      };
  
      const providers = ReflectiveInjector.resolve([{ provide: CURRENCY_MASK_CONFIG, useValue: ng2CurrencyMaskConfig }]);
      ReflectiveInjector.fromResolvedProviders(providers, this.injector);
    }
  }
  </code></pre>
  
  <p>And using Static <code>Injector</code> doesn't work:</p>
  
  <pre><code>Injector.create(
  [
      { 
          provide: CURRENCY_MASK_CONFIG, 
          useValue: ng2CurrencyMaskConfig 
      }
  ], 
  this.injector);
  </code></pre>
  
  <p>Side Note:
  I'm well aware of an alternative solution for this specific module (<code>CurrencyMaskModule</code>) where we can actually just make a provider with a mutable property that will hold the <code>CurrencyMaskConfig</code> value. But this will leave me forced to change all input fields to add an attribute <code>options</code> to all the input fields using the <code>currencyMask</code> directive. In other words, I will be inserting something like <code>[options]="myConfigProvider.currencyMaskConfig"</code> in all those inputs needing it. I'm hoping to see a better/ more elegant way of doing this.</p>