One of the challenges I'm currently facing is how to assign a CSS class based on a calculation in my component. Here's a snippet from 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>`
// Although the intended code does not work, I aim to achieve something similar
}
}
}
}In essence, I am trying to display JSON data in a responsive grid layout using Bootstrap offset classes, but encountering difficulties in getting it to work properly. Any suggestions or guidance would be greatly appreciated.