1

I am trying to generate a html code as a string for a Clarity-data-grid using TS then set that string to be the value of a div but the clarity framework won't work unless I actually type the HTML code in the HTML file.

this.component.nativeElement.innerHTML=this.html; -> doing this in TS won't work. But it works if I type everything in (#html below), it will display the table.

html: string ='';
//Generating the grid
private genGrid(data: string): void {
    let request: Object;
    if(data !== ''){
      request = JSON.parse(data);
      for(let prop in request){
        if(request.hasOwnProperty(prop))
          this.html+='<clr-dg-column [clrDgField]="\''+prop+'\'">'+prop+'</clr-dg-column>';
      }
      for(let prop in request){
        if(request.hasOwnProperty(prop))
          this.html+='<clr-dg-cell>'+prop+'</clr-dg-cell>';
      }
    }
}
this.genGrid(someString);
this.component.nativeElement.innerHTML=this.html;

this html code will be generated in my file #html

<div class="card-block" style="padding: 0 10px 10px 10px;"><clr-datagrid><clr-dg-column [clrDgField]="'productId'">productId</clr-dg-column><clr-dg-column [clrDgField]="'productCategoryId'">productCategoryId</clr-dg-column><clr-dg-column [clrDgField]="'productName'">productName</clr-dg-column><clr-dg-column [clrDgField]="'countUnit'">countUnit</clr-dg-column><clr-dg-column [clrDgField]="'manufacturer'">manufacturer</clr-dg-column><clr-dg-column [clrDgField]="'country'">country</clr-dg-column><clr-dg-column [clrDgField]="'description'">description</clr-dg-column><clr-dg-column [clrDgField]="'status'">status</clr-dg-column><clr-dg-column [clrDgField]="'createdDate'">createdDate</clr-dg-column><clr-dg-column [clrDgField]="'createdBy'">createdBy</clr-dg-column><clr-dg-column [clrDgField]="'modifiedBy'">modifiedBy</clr-dg-column><clr-dg-column [clrDgField]="'modifiedDate'">modifiedDate</clr-dg-column><clr-dg-cell>productId</clr-dg-cell><clr-dg-cell>productCategoryId</clr-dg-cell><clr-dg-cell>productName</clr-dg-cell><clr-dg-cell>countUnit</clr-dg-cell><clr-dg-cell>manufacturer</clr-dg-cell><clr-dg-cell>country</clr-dg-cell><clr-dg-cell>description</clr-dg-cell><clr-dg-cell>status</clr-dg-cell><clr-dg-cell>createdDate</clr-dg-cell><clr-dg-cell>createdBy</clr-dg-cell><clr-dg-cell>modifiedBy</clr-dg-cell><clr-dg-cell>modifiedDate</clr-dg-cell>
Adrita Sharma
  • 21,581
  • 10
  • 69
  • 79
RukaDo
  • 155
  • 1
  • 9

1 Answers1

1

Because this is an Angular library. It works with Angular context, and it needs to be compiled in order to work properly.

Setting it as innerHTML of an element (which, BTW, is a very bad practice in Angular) makes it "final", i.e. it will not be compiled to JS code.

If you want to do that, I suggest you take a look at dynamic components or CDK Portals

  • Thanks for the quick response – RukaDo May 31 '19 at 07:39
  • woulnd't this switch between components? is it possible to change the html of 1 component and reuse that component? – RukaDo May 31 '19 at 08:13
  • @RukaDo you can do so with conditions `*ngIf` –  May 31 '19 at 08:15
  • I am sorry, lemme restate my goal, I would like to be able to generate the template as a string then assign that string to a div to change its content. For example, I have a nav with 2 options A and B. when I click A, my table would be generated with number of ObjectA.props columns, when i click B, my table would be generated with number of ObjectB.props columns. All of this is in 1 page with components nav, table. If please indicate if this doesn't make sense – RukaDo May 31 '19 at 08:32
  • It doesn't make sense **when using Angular**. Angular isn't made for this kind of behavior. In your example, you should have your data in arrays, and when clicking on your nav, change the current array to the one corresponding to the clicked nav item. –  May 31 '19 at 08:36
  • I have my data stored as an Object and when I click on nav, that Object does change as it should. The only problem is to regenerate the table based on that Object. I regenerated a new template as a string in TS already. I just don't know how to switch the current template of table to that new template and compile it – RukaDo May 31 '19 at 08:39
  • @RukaDo if you have two objects, you have 3 variables : `obj1, obj2, currentObj`. Clicking the nav will update the value of `currentObj`, effectively changing the memory reference, thus reloading the table. –  May 31 '19 at 08:41
  • Another thing is I am using Clarity as my css framework. My old code with innerHTML does change the HTML code but the framwork doesn;t work – RukaDo May 31 '19 at 08:44
  • `` is an Angular component (or at least a web component, but after reading the documentation I have seen it was an Angular component), not only some CSS. –  May 31 '19 at 08:45
  • hmm so is it possible to update the content of clr-data-grid (html) then compile it? By content, I mean changing the number of columns as its datas i.e a whole different data-grid Sorry for my ignorance, I new to angular – RukaDo May 31 '19 at 08:49
  • @RukaDo that's a lot to change, you should make two components. But yes, you can, and again, it's done through templates. –  May 31 '19 at 08:53