I'm loading some content from the beehance API in JSON, which has some text and the style info to make it look as it was configured in the editor.
the text contained in the JSON has html tags and I add it with [innerHTML]
{
text: '<div class="sub-title">Lorem ipsum</div> <div class="paragraph">dolor sit amet</div>',
...
}
and the styles are something like
"paragraph": {
"color": "#3B3B3B",
"font_family": "arial,helvetica,sans-serif",
"font_size": "12px",
"line_height": "1.4em",
"text_align": "left"
},
"subtitle": {
"color": "#000000",
"font_family": "arial,helvetica,sans-serif",
"font_size": "14px",
"line_height": "1.6em",
"text_align": "right"
}
so is there an Angular2 way I can append some generated css to a <style> element?
I tried with a style tag inside the template but I don't know how to interpolate there.
The style metadata doesn't work because the styles are dynamically fetched and they vary depending on the project.
What I want is something like this:
@Component({
template: `
<style>
.paragraph {
{{styles.paragraph}}
}
</style>
`
})
But the interpolation doesn't work, is there a way to do something like that?
I found this solution (it is mostly the hack, but it works):
src/index.html
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<body>
<style id="theme_styles"></style>
<app-root></app-root>
</body>
</html>
src/app/style1.css.ts
export const style1 = `
body {
background: red;
}
`;
src/app/style2.css.ts
export const style2 = `
body {
background: blue;
}
`;
src/app/app/component.ts
import { Component } from '@angular/core';
import { style1 } from './style1.css';
import { style2 } from './style2.css';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
private themeElement: Element = document.getElementById('theme_styles');
private isStyle1: boolean = false;
constructor() {
this.themeElement.innerHTML = style1;
}
ngOnInit() {
if (this.isStyle1) {
this.themeElement.innerHTML = style1;
} else {
this.themeElement.innerHTML = style2;
}
}
}
You can add dynamic styles directly to the elements
{
text: '<div class="sub-title">Lorem ipsum</div> <div class="paragraph" [ngStyle]="styles.paragraph">dolor sit amet</div>',
...
}
but there is currently no way to using bindings in styles itself.
Related issues
- https://github.com/angular/angular/issues/2567
- https://github.com/angular/angular/issues/6274
- https://github.com/angular/angular/issues/10093
