prevent angular from recursively loading component

Question

I'm loading component dynamically into dynamic position and since that component is a table row I'm using selector: 'td' because I need to apply colspan to the dynamically add row then load the dynamic component in it. The problem is my component is a table which contains <td> tags and these tags causing angular into going into infinity recursive loop!

What are my alternatives?

I have looked at few ways on how recursive component working but couldn't figure a way to stop angular from thinking this that the tag isn't needed Tried to use *ngTemplateOutlet but got lost

@Component({
  selector: 'td',
  template: `
  <div style="background:red">
    <td>Mark</td> <!-- This is the problem! -->
  </div>
  `,
  host: {
      "[attr.colspan]": "3", 
   },
})

If preventing isn't possible what are my other options? I was thinking of replacing <td> with <div> !

Answer 1

Don't replace td with div and don't override standard html tags! What if you import a component and that component use td or div too? Do you really want it to be replaced with your template? That would break everything! Just use another name (maybe with a namespace like app-td) or use an attribute to distinguish it:

selector: 'td[custom]'

and then use it like:

<td custom></td>