I am developing my custom module. I have the html template look like this
<p>
This is a <strong>text that I need to translate</strong>
</p>
<p>Read more: <a href="" target="_blank" rel="noopener noreferrer">google.com</a></p>
How can I translate these nested texts? I know how to use i18n to translate but I don't know how to translate the text in <p>
tag that has <strong>
tag in the middle
I used this but not work
<p >{{trans "This is a"}} <strong>{{trans "text that I need to translate."}}</strong></p>
I can do this and it works but I really don't like the extra span tag
<p ><span data-bind="i18n: 'This is a '"/><strong data-bind="i18n: 'text that I need to translate.'"/></p>
NOTE: My file is the js component template so it's HTML. It is not phtml file