CODEWITHSUNDEEP
htmlangularvisual-studiovisual-studio-2017angular-cdk
Ahmad Akra
Ahmad Akra

Reputation: 535

Angular CDK table: Element 'td' cannot be nested inside element 'table'

I'm trying to use the Angular CDK table in an Angular 7 project in Visual Studio 2017. When I follow the official code sample from here it works perfectly but I get these warnings from visual studio: Element 'td'/'th' cannot be nested inside element 'table'.

Below is the code for reference:

    <table cdk-table [dataSource]="masterIds">

      <ng-container cdkColumnDef="name">
        <th cdk-header-cell *cdkHeaderCellDef> Name </th>
        <td cdk-cell *cdkCellDef="let id"> {{ ws[id].Name }} </td>
      </ng-container>

      <ng-container cdkColumnDef="code">
        <th cdk-header-cell *cdkHeaderCellDef> Code </th>
        <td cdk-cell *cdkCellDef="let id"> {{ ws[id].Code }} </td>
      </ng-container>


      <tr class="small" cdk-header-row *cdkHeaderRowDef="['name', 'code']"></tr>
      <tr cdk-row *cdkRowDef="let id; columns: ['name', 'code']" [routerLink]="['./', id]"></tr>

    </table>

Any idea how to get rid of these warnings? They are poking me in the eye. Thanks

UPDATE Here is a picture of the warnings:

enter image description here

And the green squiggles : enter image description here

Upvotes: 2

Views: 1365

Answers (2)

Ahmad Akra
Ahmad Akra

Reputation: 535

I just found a way which "seems" to work; wrap all the column definitions inside an invisible <tr> element and that's that:

<table cdk-table [dataSource]="masterIds">

  <tr style="display:none!important">
    <ng-container cdkColumnDef="name">
      <th cdk-header-cell *cdkHeaderCellDef> Name </th>
      <td cdk-cell *cdkCellDef="let id"> {{ ws[id].Name }} </td>
    </ng-container>

    <ng-container cdkColumnDef="code">
      <th cdk-header-cell *cdkHeaderCellDef> Code </th>
      <td cdk-cell *cdkCellDef="let id"> {{ ws[id].Code }} </td>
    </ng-container>
  </tr>


  <tr class="small" cdk-header-row *cdkHeaderRowDef="['name', 'code']"></tr>
  <tr cdk-row *cdkRowDef="let id; columns: ['name', 'code']" [routerLink]="['./', id]"></tr>
</table>

Upvotes: 4

SeleM
SeleM

Reputation: 9658

A th should be inside a tr, you should have something like :

<table>
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

For your updated question

That's because of the Visual studio compiler itself, you can search for How to suppress VS studio compiler warnings (try this), and a tip: switch to VsCode for your frontend dev.

Upvotes: 0

Related Questions