0

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> !

et3rnal
  • 322
  • 4
  • 17

1 Answers1

4

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>
Christian Vincenzo Traina
  • 9,546
  • 2
  • 40
  • 63
  • Definitely the good answer. [It's even in the style guide](https://angular.io/guide/styleguide#component-selectors), should one care to read it. –  May 22 '19 at 08:36
  • Thanks, by replacing I meant the td inside my table not the selector then apply a style to it. I also forgot to attach https://stackblitz.com/edit/dynamically-row-components-for-smart-table Anyway using ``selector: 'td[custom]'`` solved it! thanks heaps – et3rnal May 23 '19 at 00:00