title: ngx-translate language change is not effect throughout application
body: <p>I have created the application with the pages like dashboard and settings. Now I want to change the language throughout the application when I change the language option. But it is working only for the settings page where I have called the language change function not in dashboard page. </p>
  
  <p>Experts inputs please?</p>
  
  <p><strong>settings.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { TranslateService, LangChangeEvent } from '@ngx-translate/core'
  
  @Component({
    selector: 'app-settings',
    templateUrl: './settings.component.html',
    styleUrls: ['./settings.component.scss']
  })
  export class SettingsComponent implements OnInit {
  
    public lang: string;
    constructor(private translate: TranslateService) {
      this.lang = "en";
  
      translate.setDefaultLang('en');
  
      let last = localStorage.getItem("selectedLang");
      // the lang to use, if the lang isn't available, it will use the current loader to get them
      translate.use(last);
    }
  
  
    changeLanguage(value: string) {
  
      console.log(value);
      if (value == "German") {
        this.lang = "de";
        localStorage.setItem("selectedLang", this.lang);
        this.translate.use(this.lang);
      }
  
      if (value == "English") {
        this.lang = "en";
        localStorage.setItem("selectedLang", this.lang);
        this.translate.use(this.lang);
      }
    }
  }
  </code></pre>
  
  <p><strong>settings html</strong></p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label [innerHTML]="'description' | translate"&gt;&lt;/label&gt;
    &lt;p&gt;Language for user interface and display data.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>dashboard html</strong></p>
  
  <pre><code>&lt;div class="card card-small dash-warning"&gt;
        &lt;h2&gt;
          &lt;i class="cis2-fa cis2-fa-dg-logo"&gt;&lt;/i&gt;
        &lt;/h2&gt;
        &lt;span class="m-t-20" [innerHTML]="'dash.doc_gen_status' | translate"&gt;&lt;/span&gt;
        &lt;h2 class="upper-case bold" [innerHTML]="'dash.doc_gen_unavail' | translate"&gt;Unavailable&lt;/h2&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  }
  
  @NgModule({
    imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, HttpClientModule, ReactiveFormsModule, ToasterModule.forRoot(), NgDynamicBreadcrumbModule, TooltipModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient]
      }
    })],
    declarations: [AppComponent, DashboardComponent, HeaderComponent, SidebarComponent, LoginComponent],
    providers: [LoggerService, DataService, Title, ToasterService, { provide: APP_BASE_HREF, useValue: '/' }, Resolver, httpInterceptorProviders],
    bootstrap: [AppComponent]
  })
  </code></pre>
  
  <p><strong>app.routing.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [
    {
      path: routePaths.login,
      component: LoginComponent
    },
    {
      path: routePaths.dashboard,
      component: DashboardComponent,
    },
    {
      path: routePaths.userProfile,
      loadChildren: './modules/userProfile/user-profile.module#UserProfileModule'
    },
    { path: '**', redirectTo: routePaths.login, pathMatch: 'full' }
  ];
  </code></pre>
  
  <p><strong>user.profile.module.ts</strong></p>
  
  <pre><code>export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  }
  
  @NgModule({
    imports: [CommonModule, ReactiveFormsModule, FormsModule, UserProfileRoutingModule,
      AgGridModule.withComponents([]), TooltipModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient]
      }
    })],
    declarations: [SettingsComponent],
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
  })
  export class UserProfileModule { }
  </code></pre>