Passing the translate value to the React component using react2angular
up vote
1
down vote
favorite
This is the component that I'm using:
<my-component
data="vm.data"
></my-component>
I would like to pass it a translated string, but I get a syntax error:
<my-component
data="vm.data"
string="{{ 'TOP_FIVE' | translate }}" // throws error in browser console
></my-component>
How can I pass along the translated string value?
angularjs reactjs
asked Jan 9 at 19:01
rk919
1421312
add a comment |
up vote
1
down vote
favorite
This is the component that I'm using:
<my-component
data="vm.data"
></my-component>
I would like to pass it a translated string, but I get a syntax error:
<my-component
data="vm.data"
string="{{ 'TOP_FIVE' | translate }}" // throws error in browser console
></my-component>
How can I pass along the translated string value?
angularjs reactjs
asked Jan 9 at 19:01
rk919
1421312
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
This is the component that I'm using:
<my-component
data="vm.data"
></my-component>
I would like to pass it a translated string, but I get a syntax error:
<my-component
data="vm.data"
string="{{ 'TOP_FIVE' | translate }}" // throws error in browser console
></my-component>
How can I pass along the translated string value?
angularjs reactjs
asked Jan 9 at 19:01
rk919
1421312
This is the component that I'm using:
<my-component
data="vm.data"
></my-component>
I would like to pass it a translated string, but I get a syntax error:
<my-component
data="vm.data"
string="{{ 'TOP_FIVE' | translate }}" // throws error in browser console
></my-component>
How can I pass along the translated string value?
angularjs reactjs
angularjs reactjs
asked Jan 9 at 19:01
rk919
1421312
asked Jan 9 at 19:01
rk919
1421312
asked Jan 9 at 19:01
rk919
1421312
asked Jan 9 at 19:01
rk919
1421312
asked Jan 9 at 19:01
rk919
1421312
1421312
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Since you are using angular-translate the best way is to inject the $translate service to your react2angular component and extend your react component with a function that return the translated string:
// INJECT SERVICE
angular
.module("components", )
.component(
"myComponent",
react2angular(MyComponent), ["data"], ["$translate"])
)
// REACT COMPONENT
class MyComponent extends React.Component {
translate = key => {
return this.props.$translate.instant(key)
}
render() {
return (
<p>{this.translate('TOP_FIVE')}</p>
)
}
}
answered Nov 19 at 12:24
Toni D'Angelo
613
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Since you are using angular-translate the best way is to inject the $translate service to your react2angular component and extend your react component with a function that return the translated string:
// INJECT SERVICE
angular
.module("components", )
.component(
"myComponent",
react2angular(MyComponent), ["data"], ["$translate"])
)
// REACT COMPONENT
class MyComponent extends React.Component {
translate = key => {
return this.props.$translate.instant(key)
}
render() {
return (
<p>{this.translate('TOP_FIVE')}</p>
)
}
}
answered Nov 19 at 12:24
Toni D'Angelo
613
add a comment |
up vote
0
down vote
Since you are using angular-translate the best way is to inject the $translate service to your react2angular component and extend your react component with a function that return the translated string:
// INJECT SERVICE
angular
.module("components", )
.component(
"myComponent",
react2angular(MyComponent), ["data"], ["$translate"])
)
// REACT COMPONENT
class MyComponent extends React.Component {
translate = key => {
return this.props.$translate.instant(key)
}
render() {
return (
<p>{this.translate('TOP_FIVE')}</p>
)
}
}
answered Nov 19 at 12:24
Toni D'Angelo
613
add a comment |
up vote
0
down vote
up vote
0
down vote
Since you are using angular-translate the best way is to inject the $translate service to your react2angular component and extend your react component with a function that return the translated string:
// INJECT SERVICE
angular
.module("components", )
.component(
"myComponent",
react2angular(MyComponent), ["data"], ["$translate"])
)
// REACT COMPONENT
class MyComponent extends React.Component {
translate = key => {
return this.props.$translate.instant(key)
}
render() {
return (
<p>{this.translate('TOP_FIVE')}</p>
)
}
}
answered Nov 19 at 12:24
Toni D'Angelo
613
Since you are using angular-translate the best way is to inject the $translate service to your react2angular component and extend your react component with a function that return the translated string:
// INJECT SERVICE
angular
.module("components", )
.component(
"myComponent",
react2angular(MyComponent), ["data"], ["$translate"])
)
// REACT COMPONENT
class MyComponent extends React.Component {
translate = key => {
return this.props.$translate.instant(key)
}
render() {
return (
<p>{this.translate('TOP_FIVE')}</p>
)
}
}
answered Nov 19 at 12:24
Toni D'Angelo
613
answered Nov 19 at 12:24
Toni D'Angelo
613
answered Nov 19 at 12:24
Toni D'Angelo
613
answered Nov 19 at 12:24
Toni D'Angelo
613
613
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48175007%2fpassing-the-translate-value-to-the-react-component-using-react2angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
