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