Assign css class in the injected html in Angular 7 - css

Question

I want to assign css class based on some calculation. This is my component class:
#Component({
selector: 'app-render-json',
template: `<div [innerHtml]="html | safeHtml"></div>`,
styleUrls: ['./render-json.component.css'] , encapsulation: ViewEncapsulation.ShadowDom
})
export class RenderJsonComponent {
#Input() myJson: any;
html = ``;
static levelDeep = 1
ngOnInit() {
this.renderJson(this.myJson)
}
renderJson(obj) {
RenderJsonComponent.levelDeep = RenderJsonComponent.levelDeep + 1
for(var key in obj) {
if(key != 'id') {
this.html = this.html + `<div class="col-md-${RenderJsonComponent.levelDeep} col-md-offset-${RenderJsonComponent.levelDeep}">${obj[key]}</div>`
// This does not work but I want to do something like this
}
}
}
}
Basically, I need to render some JSON in a GRID style through bootstrap using offset classes but this does not work somehow. Any help is appreciated.

Answer 1

#Component({
selector: 'app-render-json',
template: `<div [innerHtml]="safeHtml"></div><div *ngFor="jsonElements as element" class="element.class">element.obj</div>`,
styleUrls: ['./render-json.component.css'] , encapsulation: ViewEncapsulation.ShadowDom
})
export class RenderJsonComponent {
#Input() myJson: any;
myLevelDeep = 1;
jsonElements = [];
ngOnInit() {
this.renderJson(this.myJson)
}
renderJson(obj) {
this.myLevelDeep = RenderJsonComponent.levelDeep + 1
for(var key in obj) {
if(key != 'id') {
jsonElements.push({class:"col-md-" + this.myLevelDeep + " col-md-offset-" + this.myLevelDeep, obj: obj[key]});
}
}
}
}