Перевод службы в файле Angular ts

Я использую угловой канал и созданную службу, которые являются рабочим файлом с html-кодом. Но они не работают, когда я использую его с файлом TS.

служба перевода

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class TranslateServices {
  data: any = {};

  constructor(private http: HttpClient) {
  }

  async use(lang: string): Promise<{}> {
    return await new Promise<{}>((resolve, reject) => {
      const langPath = `assets/i18n/${lang || 'en'}.json`;
      this.http.get<{}>(langPath).subscribe(
        translation => {
          this.data = Object.assign({}, translation || {});
          resolve(this.data);
        },
        error => {
          this.data = {};
          resolve(this.data);
        }
      );
    });
  }
}

перевести трубу

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateServices } from '../../../shared/services';
    @Pipe({ name: 'translate', pure: false })
    export class TranslatePipe implements PipeTransform {
      constructor(private translate: TranslateServices) { }
      transform(key): any {
        // console.info('this.translate.data[key]', this.translate.data[key]);
        return this.translate.data[key] || key;
      }
    }

это отлично работает в html

<input type = "text"  placeholder = "{{ 'lbl.SearchByCodeOrStatus' | translate }}" class = "form-control border-0">

но когда я использую это, я все ломаю

import { TranslateService } from '@ngx-translate/core';
this.translate.get([menuItem.title]).subscribe(translations => {
   menuItem.title: translations[menuItem.title]
});