Angular mat-table - HTML element in a cell

0
votes

I don't know if this is possible but mayB someone could help me ..

I have a MAT-TABLE (Angular material) with many columns (I built a MatTableDataSource and everything is dynamic)

In one of these columns I'd like to put an information i'm getting from an other application :

  • if the information is not null, i just display it as a string in the column (no problem for this)
  • if the information is null, I'd like to put a select element in my cell

So i'm doing the following in the TS file :

• if (information not null) => data = [...,attribut:information,...]

• if (information is null) => data = [...,attribut:<select><option>test</option></select> ,...]

But it appears as a string in my application and not as an HTML element How can I proceed ?

what i want to do, but easier explaination :

public test: any;
this.test = `<select><option>opt1</option><option>opt2</option></select>`;

in template :

<div>
  {{test}}
</div>

but here my result : result

how to build an HTML element in my TS file and then show it in my html file ? thanks

1
angulardynamic
share you code plz - Chellappan வ

1 Answers

0
votes

Create a component with this HTML markup and append that component dynamically into the container.

Visit https://angular.io/guide/dynamic-component-loader for more details.

Without creating it as a component, it won't be working as a select HTML markup.