Support for transpiling arbitrary content

[joonashak]

We are using transloco and ngx-transloco-markup with a set of custom transpilers that handle some HTML tags found in our translation values. However, we also have content sourced from a database that makes use of the same set of HTML tags and it would seem prudent to use the same transpilers for that, too.

Would you be willing to accept a PR where I add an input property to the <transloco> component that allows passing in arbitrary content for transpilation as an option to using the key prop? The content could be just a string or perhaps an object with language code as keys.

I realize this might be slightly out of scope for this library, but on the other hand it would not interfere with anything, either. And there could be a marginal general use case, as such a prop might sometimes be handy for quick testing, etc.

Please let me know what you think about this. And big thanks for a solid library - I've really enjoyed using it and your blog text about transpilation, too! 🖖

[dscheerens]

Hi @joonashak, thanks for suggestion. I can see the value in having your content be rendered also using these transpilers and do think it would be nice addition to the library. I'm doubting whether it makes sense to add it to the <transloco> component using a separate input property (e.g. content) or creating a different component for that specific use case as it wouldn't really be using Transloco (except maybe for string interpolation expressions). Let me think about that for a bit.

[joonashak]

creating a different component for that specific use case

Yeah, I think this is probably the way to go, too. From a semantic point of view, it would be kind of funny to see something like <transloco content="something <b>bold</b>">. TBH, my original suggestion stemmed from trying to find the easiest way to implement something like this – I'm not experienced enough with Angular to see right away how the existing code should be refactored to use common code for the transpilation part between the existing <transloco> component and a new one. However, I'll figure that out surely.

If you'd like, I can help out with the implementation. I'm able to use some working hours for this, so you don't have to do it all on your free time :)

[dscheerens]

I've given it some thought. Although my first intuition to create separate component for this use case initially seemed like a good idea, I now no longer feel that is the right approach. Reason being is that it will still depend on Transloco for the string interpolation (unless the default string interpolation transpiler is overridden) and the transpilation process also requires a translation dictionary. The latter isn't something that can be dropped.

Based on this I am more inclined to extend the <transloco> component. Since that is very straightforward to implement I did a quick test and it works fine. However, you'll have to keep in mind that if you use the default string interpolation transpiler you will also be able to refer to transloco translations in such expressions. For example, if I add the following code to the basic example of the demo application:

<transloco [value]="'[i]Test:[/i] [b]{{ BASIC.TITLE }}[/b]'" />

The result is the following (using the English translations):

Test: Basic example

This might be okay for your use case. If not, you'll have to provide a custom string interpolation transpiler that doesn't make use of Transloco.

[joonashak]

Sounds very good! You already have an implementation for this after your tests or should I open a PR?

[dscheerens]

Yeah, I already have an implementation. Just need to add a unit test for it and make a release. Will do that later today.

[dscheerens]

Ok, I just released version 5.1.0 which adds the content property to the <transloco> component. Should be what you need :)

[joonashak]

Thank you very much, how wonderful! Owe you one 💪

[dscheerens]

No problem! Hope this new feature is working out well for you. Cheers