ng2-translate - Translation strings not updating in Components with OnPush change detection
<p>When I first change the language of my application the translation service makes a request for the file that represents the new language, My 'smart' components strings reflect the update correctly BUT any 'pure/dumb' components do not, they stay in the previous language. However, once the new language file has been loaded into cache and I continue to change languages everything seems to work fine.</p>

<p>It seems that any pure component is not resolving updates from the ajax response for the new language file, it will only change language correctly when the file has already been loaded into cache. Again, this is only for components that are using ChangeDetectionStrategy.OnPush</p>

<p>I understand the changeDetection using Inputs and Observables in dumb components but I'm not so familiar when it comes to pipes in this case. Possibly I'm missing something? </p>

<p>UDPATE</p>

<p>I've managed to hack a fix, it's not great but it works. This is the constructor in my service that wraps the Translate service.</p>

<p>I check to see if I have the language json file already in cache for the language I'm about to select. If I don't have it I use the 'reloadLang' method in ng2-translate to go and get it. Once I have it I use an empty timeout and then call 'translate.use'. There's a timing issue somewhere because If I take out the timeout it doesn't work. 
If I already have the translation file I'm about to switch to I just use translate.use as normal and all works fine.</p>

<pre><code>constructor(private translate: TranslateService, public store: Store&lt;any&gt;) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// subscribe to changes
store.select('i18n').subscribe((state: MultilingualStateI) =&gt; {
  // update ng2-translate which will cause translations to occur wherever the TranslatePipe is used in the view
  if (this.translate.getLangs() &amp;&amp; (this.translate.getLangs().indexOf(state.lang) &gt; -1)) {
    this.translate.use(state.lang)
  } else {
    this.translate.reloadLang(state.lang).take(1).subscribe(() =&gt; {
      setTimeout(() =&gt; this.translate.use(state.lang), 0);
    });
  }
});
</code></pre>

<p>}</p>

<p>I'm not totally sure what's going on here but it seems to be a mix between using ChangeDetectionStrategy.OnPush and a fresh response from requesting the translation file. If anyone else is seeing this please add your input. </p>