There is a situation where an input is defined on a child component like the following:
interface MyValues {
text: string;
path: string;
someOtherValue: string;
}
@Input() myValues: MyValues;
I need to pass myValues to the child component from the parent via an input like the following:
<my-child-component [myValues]="myValues" />
Since it's not a simple data type input, I can't use the attribute style of i18n as recommended in the Angular docs here. This is an object with multiple values so it can't be translated as it's passed to the child component (unless I'm missing something).
In the child component, there is some code such as the following:
<span *ngFor="let myValue of myValues">
<a></a>
</span>
Ordinarily what I'd like to do is assign an id to that anchor that needs translated like the following:
<a i18n="@@myChildComponent_text"></a>
The problem with this is it will create exactly one field in the translation file named, @@myChildComponent_text to be translated. However, this object being passed in to this child component is dynamic in what values are inside of myValues and therefore the literal translation will vary depending on what's being passed in.
My question is, how do I still leverage the i18n Angular internationalization abilities and @@id custom ids when passing an object to an input on a child component, where that object will have varying physical values within it that need translated?
from How to use i18n with component inputs that are objects in Angular?
Very informative.Thanks for sharing
ReplyDeleteFull Stack online Training
Full Stack Training
Full Stack Developer Online Training