Dynamic CSS-Styles from API for dynamic Content

Ionic Framework ionic-v3
1

Hey Folks!
I’m stuck with following problem:

I recieve an dynamic HTML-Content-Snippet from an API with certain classes and ids applied.
Additionally there a dynamic and individual CSS-Stylesheet I can access through this API, too.

What i got so far:

encapsulation: ViewEncapsulation.None, is important, otherwise the classnames etc. would be changed.

What i can’t get to work is to apply the styles received from the API to the component.

The first idea was to put the style-promise-result directly here:

@Component({
  selector: 'page-dynamic',
  templateUrl: 'dynamic.html',
  encapsulation: ViewEncapsulation.None, 
  style: mycssapi
})

or somehow inject it afterwards. Didn’t get it working.

The second idea was to add <style type="text/css" [innerHTML]="mycss?.styles"> or this:

<style type="text/css">{{mycss?.styles}}
  </style>

Someone an idea how to solve this?

Thank you in advance!
Markus

2

Have you solved this problem? I have the same…

3

Sadly no. The concept of ionics views doesn’t support something like this.

4

Not sure, but have you looked to the directives ? for example https://www.joshmorony.com/how-to-create-a-directive-in-ionic-2-parallax-header/

5

Use Angular ComponentFactoryResolver, like in this tutorial :
https://devdactic.com/dynamic-components-ionic/

6

Thank you very much! I will check this out soon.