Using translation service in components

Instantiate the translation service in the component:

constructor(
  private translate: TranslationService
) { }

Then you can get the translation texts:

ngOnInit() {
  const title: string = this.translate.get( 'app.home.title' );
  const promo: string = this.translate.get(
    'app.promotions.daily',
    { product: 'CPG34500', discount: 15 }
  );
  const news: object = this.translate.getGroup( 'app.news' );
}

You must get the translation texts again after the current language has changed. Another solution is to use the TranslatableTextList or TranslatableOptionList classes to manage the translations because they update their texts automatically.

The service provides localization helper methods for formatting values, e.g. message strings to build in the components:

helper(): void {
  const msg1 = `The product has ${ translate.number( 12345 ) } pieces on stock.`;
  const msg2 = `The ${ translate.percent( 0.1234 ) } of the products are damaged.`;
  const msg3 = `The product costs ${ translate.currency( [ 123.45, 'USD' ] ) }.`;
  const msg4 = `The product costs ${ translate.ccy( 123.45, 'USD' ) }.`;
  const msg5 = `The products arrived on ${ translate.datetime( Date.now() ) }.`;
}