Good day, need help. Asynchronous request, comes object whose property is text in tags. I place for display in a template.

<div class="some_class" [innerHTML]="something"></div>

Now you need to apply for it some styles in the css file.

 .some_class { display:inline-block }

Does not see, all similar classes on the page see, what is placed with the help of innerHTML does not see. But it normally works out the markup that is in it. Angular2 if it helps of course.

1 answer 1

This is due to the specifics of innerHtml and angular 2 encapsulation.

1 Method

Connect the css file via <link rel="stylesheet" href="путь к файлу"></link> and specify the necessary classes in it that are in innerHtml. That is, we do as in any project.

2 Method

Set styles with :host >>> .class .

In the example below there is a certain block <div [innerHTML]="someHtml"></div> into which some HTML will be inserted

  <p class="styleP1">Hello</p> <p class="styleP2">Hello</p>

with classes .styleP1 , .styleP2 .

The first <p class="styleP1">Hello</p> style does not apply, because it is not set via: host, the second <p class="styleP2">Hello</p> will turn red.

  @Component({ selector: 'my-app', template: ` <div> <div [innerHTML]="someHtml"></div> </div> `, styles: [ `:host >>> .styleP2 { color: red; } .styleP1, .styleP2 { color: red; }` ], }) export class App { constructor() { this.someHtml = `<p class="styleP1">Hello</p> <p class="styleP2">Hello</p>`; } }