Angular 9: i18n in TypeScript

Question

I studied the new i18n feature in Angular 9. https://angular.io/guide/i18n

How to translate text in TypeScript, e.g. SnackBar messages?

Answer 1

The better way of translationId is:

title = $localize`:@@Home.Title:Some title text`

and you have to manually add it to your messages.xx.xlf (for example messages.fr.xlf and so on)

<trans-unit id="Home.Title">
  <source>Some title text</source>
  <target>TRANSLATION_HERE</target>
</trans-unit>

Answer 2

Check this blog https://blog.ninja-squad.com/2019/12/10/angular-localize/

@Component({
  template: '{{ title }}'
})
export class HomeComponent {
  title = $localize`You have 10 users`;
}

And

You have to manually add it to your messages.fr.xlf

<trans-unit id="6480943972743237078">
  <source>You have 10 users</source>
  <target>Vous avez 10 utilisateurs</target>
</trans-unit>

don't forgot re serve your angular application.

UPDATE FOR ID

@Component({
  template: '{{ title }}'
})
export class HomeComponent {
  title = $localize`:@@6480943972743237078:`;
}

https://github.com/angular/angular/blob/252966bcca91ea4deb0e52f1f1d0d3f103f84ccd/packages/localize/init/index.ts#L31