I tried using making it using dynamic HTML but I unable to call click event in dynamic HTML.
This is what is tried by myself
my .ts file
htmlgrid:any;
jsonData:any;
ngOnInit(){
this.htmlgrid= this.parse(this.jsonData)
}
createRow (r) {
return '<div style="background-color : ' + r.color + '" class="row">' +
(r.text ? r.text : '') + this.parse(r) + '</div>';
}
createColumn (c) {
return '<div style="background - color: red;" class="col-md-' + 6 + ' test">' +
(c.text ? c.text : '') + this.parse(c) + '<img click="hell();" src = "../../../../assets/img/collection.jpg" style = "height: 100px; width:auto;" />' + '</div>';
}
parse (s) {
let S = '';
if (s.rows) {
for (let i in s.rows) {
console.log(s.rows[ i ], 'i of data');
S += this.createRow(s.rows[ i ]);
}
}
if (s.columns) {
for (let i in s.columns) {
S += this.createColumn(s.columns[ i ]);
}
}
console.log(S, 'value of s');
return S;
}
My.html file
<div class="one" [innerHtml]="htmlToAdd"></div>
this type of JSON is used for making rows and columns,we also have identifiers and row-column checks in our JSON. Please help I got stuck here so bad, i need to make grid of row and columns on the basis of below json
this.jsonData={
"rows":[
{
"columns":[
{
"identifier":"c1",
"hasRows":false,
"cashBack":{
"text":""
},
"title":{
"text":""
},
"images":{
"leafBanner":{
"url":"",
"bannerName":"",
"bannerType":"",
"bannerTarget":""
},
"listPageBanner":{
"image":"",
"2X":{
"height":"200px",
"width":"400px"
},
"3X":{
"height":"300px",
"width":"600px"
}
}
},
"height":"50",
"width":"50"
},
{
"identifier":"c2",
"hasRows":false,
"cashBack":{
"text":""
},
"title":{
"text":""
},
"images":{
"leafBanner":{
"url":"",
"bannerName":"",
"bannerType":"",
"bannerTarget":""
},
"listPageBanner":{
"image":"",
"2X":{
"height":"200px",
"width":"400px"
},
"3X":{
"height":"300px",
"width":"600px"
}
}
},
"height":"50",
"width":"50"
}
]
},
{
"columns":[
{
"identifier":"c3",
"hasRows":false,
"cashBack":{
"text":""
},
"title":{
"text":""
},
"images":{
"leafBanner":{
"url":"",
"bannerName":"",
"bannerType":"",
"bannerTarget":""
},
"listPageBanner":{
"image":"",
"2X":{
"height":"200px",
"width":"400px"
},
"3X":{
"height":"300px",
"width":"600px"
}
}
},
"height":"33",
"width":"33"
},
{
"identifier":"c4",
"hasRows":false,
"cashBack":{
"text":""
},
"title":{
"text":""
},
"images":{
"leafBanner":{
"url":"",
"bannerName":"",
"bannerType":"",
"bannerTarget":""
},
"listPageBanner":{
"image":"",
"2X":{
"height":"200px",
"width":"400px"
},
"3X":{
"height":"300px",
"width":"600px"
}
}
},
"height":"33",
"width":"33"
},
{
"identifier":"c5",
"hasRows":false,
"cashBack":{
"text":""
},
"title":{
"text":""
},
"images":{
"leafBanner":{
"url":"",
"bannerName":"",
"bannerType":"",
"bannerTarget":""
},
"listPageBanner":{
"image":"",
"2X":{
"height":"200px",
"width":"400px"
},
"3X":{
"height":"300px",
"width":"600px"
}
}
},
"height":"33",
"width":"33"
}
]
}
]
}
Advertisement
Answer
You can define a component which will generate your html and you can call it recursively
@Component({
selector: "grid",
template: `
<ng-container [ngSwitch]="(data | keyvalue)[0].key">
<ng-container *ngSwitchCase="'rows'">
<div class="row" *ngFor="let row of data.rows">
<grid [data]="row"></grid>
</div>
</ng-container>
<ng-container *ngSwitchCase="'columns'">
<div class="col" *ngFor="let col of data.columns">
<grid [data]="col"></grid>
</div>
</ng-container>
<ng-container *ngSwitchDefault>
<grid [data]="data.rows" *ngIf="data.hasRows; else cell"></grid>
<ng-template #cell>
<div class="cell">{{ data | json }}</div>
</ng-template>
</ng-container>
</ng-container>
`,
styles: [
".row{background-color:red;padding: 5px;}",
".col{background-color:green; padding:5px;}",
".cell{background-color:cyan;padding:5px;}"
]
})
export class GridComponent {
@Input()
data: any;
}
You can call this grid component from your app/display component like this
<grid [data]="jsonData"></grid>
This is a head start you can modify the the default switch case to cater to your needs I just did find an attribute hasRows in your json if that’s true it will recursively call grid component back again.
Hope it helps, Stackblitz for your reference: https://stackblitz.com/edit/angular-6cqbsg