How to translate Typescript strings in a Angular 2 app?

Question

I know of two major platforms for Angular 2 i18n: The official way, and ng2-translate. I am much more inclined to use what the official docs recommend. For me it's very clear how to translate the HTML strings. But there is one thing I didn't get yet: How do I translate the Typescript strings?

For example, I have the following component that uses the built-in i18n solution:

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'hello',
    template: `
        <h1 i18n>Hello {{name}}!</h1>
        <button (click)="notify()"></button>
    `
})
export class HelloComponent {

    private name = 'John Doe';

    notify() {
        /* How do I translate this? */
        alert(`Hello ${this.name}!`);
    }
}

The string placed in the HTML will be translated. But how do I translate the string shown in the alert? If there is not a native way, what would be the recommended way to accomplish this?

Looking at the docs, i18n seems to be specifically for component template text. — jonrsharpe
– jonrsharpe, Commented Dec 19, 2016 at 16:56
There isn't an official way yet. github.com/angular/angular/issues/11405 Upvote this so they prioritize it! — Simon Briggs
– Simon Briggs, Commented Dec 20, 2016 at 6:41

Jim Buck · Accepted Answer · 2016-12-19 19:00:00Z

1

The Angular team is very focused on creating a core product with some additional services that others can optionally use (routing, translations, etc). So don't discredit any community-made libraries, that's what makes Angular so useable!

That being said, I highly recommend ng2-translate for your needs. You can preload translations, call them synchronously or asynchronously, and use it as a pipe in a template or via a service in your component classes.

answered Dec 19, 2016 at 19:00

Jim Buck

2,44426 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cookya Over a year ago

is this still the case or has something changed?

titusfx Over a year ago

yes, still. You can make somework around, like doing a component with strings and get them in a service and use as constants. More info about current state here: github.com/angular/angular/issues/11405

Collectives™ on Stack Overflow

How to translate Typescript strings in a Angular 2 app?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related