How to create a custom reusuable component to display Empty message in Primeng Table?

I'm using primeng tables in my project and I'm trying to create a custom reusable component to display empty message when no data is available. So, In my component if I have the below code it is working fine.

<ng-template pTemplate="emptymessage">
      <tr>
        <td colspan="12" class="empty-message">
          <div class="empty-message-container">No Data</div>
        </td>
      </tr>
</ng-template>

But, when I create a custom component and call it here, it is just displaying the empty message, but the colspan is not working. Below is the code for my custom component.

Html code:

<tr>
 <td [attr.colspan]="colspan" class="empty-message">
  <div class="empty-message-container">No Data</div>
 </td>
</tr>

Ts code:

import {Component, Input} from '@angular/core';
import {TableModule} from "primeng/table";

@Component({
 selector: 'app-table-empty-message',
 standalone: true,
 imports: [TableModule],
 templateUrl: './table-empty-message.component.html',
 styleUrl: './table-empty-message.component.scss'
})
export class TableEmptyMessageComponent {
 @Input() colspan: number = 1;
}

Css code:

.empty-message {
  padding: 20px;
}

.empty-message-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }

And I'm calling the custom component in my code as follows:

<ng-template pTemplate="emptymessage">         
      <app-table-empty-message [colspan]="11"></app-table-empty-message>
    </ng-template>

This would only display the "No Data" message but not in the center.

Any help would be appreciated. Thanks in Advance!

Best regards, Nitin

Only display "No Data" message but not in the center, because the app-table-empty-message tag is not valid for the tbody.

You can adjust the selector of your component to tr[app-table-empty-message]

HTML code

 <td [attr.colspan]="colspan" class="empty-message">
  <div class="empty-message-container">No Data</div>
 </td>

TS Code

import {Component, Input} from '@angular/core';
import {TableModule} from "primeng/table";

@Component({
 selector: 'tr[app-table-empty-message]',
 standalone: true,
 imports: [TableModule],
 templateUrl: './table-empty-message.component.html',
 styleUrl: './table-empty-message.component.scss'
})
export class TableEmptyMessageComponent {
 @Input() colspan: number = 1;
}

Use

<ng-template pTemplate="emptymessage">         
  <tr app-table-empty-message [colspan]="11" ></tr>
</ng-template>