在Angular中，如何从组件模板周围删除选择器标签？

Question

In Angular, how to remove the selector tag from around the component's template? It is making problems for browser to display the <td> fields within the component. I have many instances of <tr> and each one has the first <td> styled differently:

<tr>
  <td>1.1</td><td>1.2</td>
        <app-summary-data-row [data]="data[1]">
        </app-summary-data-row>
    </tr>
    <tr>
            <td colspan=2>2</td>
            <app-summary-data-row [data]="data[2]">
            </app-summary-data-row>
        </tr>

But, the majority set of <td> follows the same pattern, so I want to make the into the same template. The trouble is the angular's tags, that distort the construct of the table.

Answer 1

You can use the attribute selector instead in @component decorator:-

@Component({
  selector: '[component-name]'
  ...
})

And then use it as:-

<div component-name>
  ...
</div>

As per the documentation:-

You can Specify a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not().

Does not support parent-child relationship selectors.