Wrap Component Feature

[alexcibotari]

Is your feature request related to a problem? Please describe.

I as a developer would like to Wrap all translation pipes or methods into a specific Angular component or HTML tag like ''.

Describe the solution you'd like

In TRANSLOCO_CONFIG to add additional property where I can pass wrap component or HTML tag.
Also, the component can receive input data from Transloco, like translation ID and Parameters.

Describe alternatives you've considered

As an alternative, I need to do it manually, and it is a huge amount of effort.
or I need to override transloco pipe

Current behavior

Not Possible

Expected behavior

To be possible to wrap translation with a specific component

Contribution

I want to make a pull request for this feature:
[ x] Yes! 🚀
[ ] Maybe next time

I would like to implement the feature, and I will need some help from your team, to give me direction and also help with best practices.

[shaharkazaz]

@alexcibotari Can you please share a code example that explains what you are trying to do/solve? I'm not sure I fully understand 🙂

[alexcibotari]

Original TS code can be any of possible way to translate

<div>{{t('translation.id')}}</div>
or
<div transloco="translation.id"></div>

Generated HTML without component wrap

<div>Translated Value</div>

Generated HTML with component wraper <app-wrap>

<div><app-wrap>Translated Value</app-wrap></div>

at the same time <app-wrap> should receive all transloco inputs as inputs ( example: id and params)

[shaharkazaz]

@alexcibotari can you please explain your use case? What are you trying to achieve?

[alexcibotari]

I'm creating a tool that helps users to translate live their translations directly on their Angular Application. At the moment, we are using directives to achieve the desired flow, and developers need all the time to pass translation ID again, in the directive.

I would like to use Transloco Library to improve the process and to wrap a translation with our component, which will remove duplication of translation ID in code, and will allow us to recommend the library for our SaaS solution.

you can check the concept on: https://lessify.io