title: ngx-translate: Translate string in Unit Testing
body: <p>I can get the value if it's a static test, but whenever I'm trying to get the translated value (using <code>ngx-translate</code>), it's empty.</p>
  
  <pre><code>&lt;div id="header-title"&gt;
      &lt;h1&gt;{{ 'MENU_TITLE' | translate | uppercase }}&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>This works</strong> and returns <code>Test</code></p>
  
  <pre><code>&lt;div id="header-title"&gt;
      &lt;h1&gt;Test&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>spec.ts</strong></p>
  
  <pre><code>it('should translate a string using the key value', () =&gt; {
      fixture = TestBed.createComponent(NavComponent);
      const title = fixture.nativeElement;
      console.log(title.querySelector('#header-title h1').innerHTML);
  });
  </code></pre>
  
  <p><strong>Importing translate module</strong></p>
  
  <pre><code>beforeEach(async(() =&gt; {
          TestBed.configureTestingModule({
              imports: [RouterTestingModule,
                  TranslateModule.forRoot({
                      loader: {
                          provide: TranslateLoader,
                          useFactory: HttpLoaderFactory,
                          deps: [HttpClient]
                      }
                  }),
                  HttpClientModule
              ],
              declarations: [NavComponent]
          }).compileComponents();
  
          injector = getTestBed();
          translate = injector.get(TranslateService);
      }));
  </code></pre>
  
  <p><strong>-----FIXED-----</strong> but not sure if this is the right way to do</p>
  
  <pre><code>let fixture: ComponentFixture&lt;NavComponent&gt;;
  
  it('should translate a string using the key value', () =&gt; {
      fixture.detectChanges() // fixture = TestBed.createComponent(NavComponent);
      const title = fixture.nativeElement;
      console.log(title.querySelector('#header-title h1').innerHTML);
  });
  </code></pre>