ngx-translate innerHTML styling

Question

I using Angular 5.0.1 and ngx-translate/core 8.0.0

I have this code in template

<p [innerHTML]="'privacyAgree'|translate:{href:'#'}"></p>

and this string in en.json

"privacyAgree": "Clicking «Registration» button, I accept<a href=\"{{href}}\">the terms</a>"

and this code in my less file

p{
    color: #8A8C8D;
    font-size: 13px;
    line-height: 1.4em;
    a{
        color: #222222;
    }
}

but color for inner "a" will not apply because Angular create this styles

p[_ngcontent-c3] {
  color: #8A8C8D;
  font-size: 13px;
  line-height: 1.4em;
}
p[_ngcontent-c3]   a[_ngcontent-c3] {
  color: #222222;
}

but ngx-translate create this code

<p _ngcontent-c3="">Clicking «Registration» button, I accept<a href="#">the terms</a></p>

and "a" tag doesn't have necessary attribute.

So how I can render [innerHTML] template after translation?

Answer 1

You have to change Encapsulation mode of your component.

Check this question, it had similar problem.

Encapsulation