ng2 translate and @Input()

Question

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"
}
}

I don't think you can translate dynamic input like that, not unless you have a translation for the given input already. Correct me if I am wrong. — John, Mar 29 '17 at 10:49
But it's just a number. I don't want to do {{ 'Contact.Text' | translate:telNumber }} {{ telephone }}. I want to send this telephone to en.json — , Mar 29 '17 at 10:51
Sorry to ask, but why do you want to send the telephone number to `en.json`? isn't the number the same in any language? I guess you have your reasons, I am just curious. — John, Mar 29 '17 at 11:00
Sometimes i want to use "Your phone number : 12334. Thank you". You know, number in text ( center ) not in the end :) — , Mar 29 '17 at 11:14

score 0 · Accepted Answer · answered Mar 29 '17 at 11:02

0

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.

answered Mar 29 '17 at 11:02

Tiep Phan

12,386
3
38
41

Do you think that i can change TranslatePipe to take the variables ( not Objects? ). ngx is for every angular version? – Mar 29 '17 at 11:19
maybe you could clone the project then modify to use another approach. – Tiep Phan Mar 29 '17 at 11:41

ng2 translate and @Input()

1 Answers1