angularinputng2-translate

ng2 translate and @Input()


I have the following problem. How Can I translate @Input() from angular2 in ng2-translate? Will be very grateful for any help. If you have any other question about my code, just ask.

I am getting

Your phone number: 123 {{ telephone }}

My code

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'child',
    template: `
        <span> {{ 'Contact.Text' | translate:telNumber:telephone }}</span>
        <input type="text" placeholder="{{ 'Contact.Input' | translate }}">
    `
})

export class ChildComponent implements OnInit {
    @Input() telephone: number; // <- this one 
    telNumber = { value: 123 };
    constructor() { }
    ngOnInit() { }
}

en.json

{
"Navigation": {
    "First": "Main Page",
    "Second": "Menu",
    "Third": "Contact",
    "ChangeLanguage": "Change language"
},
"Mainpage": {
    "Title": "Welcome to the home page",
    "Content": "This home page is the most beautiful homepage you have ever seen"
},
"Menu": {
    "Title": "Animals",
    "FirstAnimal": "Dog",
    "SecondAnimal": "Cat",
    "ThirdAnimal": "Cow",
    "FourthAnimal": "Pig",
    "FifthAnimal": "Bird"
},
"Contact": {
    "Title": "Contact to us",
    "Text": "Your phone number:  {{ value }} {{ telephone }}",
    "Input": "Deutschland Name"
}
}

Solution

  • try this

    import { Component, OnInit, Input } from '@angular/core';
    
    @Component({
        selector: 'child',
        template: `
            <span> {{ 'Contact.Text' | translate:telParams }}</span>
            <input type="text" placeholder="{{ 'Contact.Input' | translate }}">
        `
    })
    
    export class ChildComponent implements OnInit {
        @Input() telephone: number; // <- this one 
        get telParams() {
          return { value: 123, telephone: this.telephone };
        }
        constructor() { }
        ngOnInit() { }
    }
    

    btw, using ngx-translate https://github.com/ngx-translate instead of ng2-translate.