Core: Unable to style inner html passed into the json string

[j-meiring]

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

I have added html tags to one of my translation strings as follows:

HTML

<span class="ex-login" [innerHTML]="'SIGN.EXLOGIN' | translate:clever"></span>

JSON

"EXLOGIN": "Iniciar con <span class='ex-text-lg'>{{value}}</span>"

CSS

 @media (max-width: 420px ) {
    .ex-text-lg {
      display: none!important;
    }

I need the login/iniciar con to fall away in a specific media query, and I had tested this with the plain text and it was working fine, but since I've added it as a translation, the style is not being picked up.

• ng2-translate version: 4.2.0

• Angular version: cli 1.0.0-beta.21

• Browser: Chrome 55.0.2883.87 m

Please let me know if there is a known fix for this issue.

[SamVerschueren]

Probably not the reason, but try escaping double quotes instead. "EXLOGIN": "Iniciar con <span class=\"ex-text-lg\">{{value}}</span>".

Does it work if you assign it to a variable inside the controller?

@Component({
    template: '<span class="ex-login" [innerHTML]="test"></span>'
})
class MyController {
    test = '<span class="ex-text-lg">Hello World</span>';
}

[j-meiring]

I actually resorted to the single quotes after first escaping the double quotes (I thought that was the reason, but I can confirm it's not).

I've tried assigning it in the controller and the same issue applies.

Perhaps this an angular issue rather than a translate issue?

[SamVerschueren]

Try this CSS instead

@media (max-width: 420px ) {
    /deep/ .ex-text-lg {
      display: none !important;
    }
}

[ocombe]

Might be a problem with how you define your styles.
If you define them in your component then angular will add a special attribute to the css tags (as well as to the dom nodes, this is the css hoisting), but this attribute is not added via ng2 translate.

To fix this you can either use /deep/ in your css, or change the view encapsulation property to none: https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation

[j-meiring]

I had originally tried :host >>>, which didn't work, but /deep/ seems to have done the trick.

Incidentally, I think this may help with a colleague's issue.

Thanks for the swift response, even though it turned to not be an issue with translate.