Por que isso ocorre? Vamos lá.

No gridchild você chama <app-grid-base></app-grid-base> então ele vai renderizar o gridbase original.

Você está criando uma herança entre o GridChildComponent e o GridBaseComponent, mas o template deles vai prosseguir sendo tratado separadamente pelo Angular, ou seja, o Angular não vai aplicar herança nos seus templates.

Eu faria o seguinte:

• Crie um terceiro componente que contenha o template compartilhado entre gridbase e gridchild.
• No template de gridbase e gridchild adicione este novo componente passando rowscomo parâmetro. Ex: <app-novo-componente [rows]="rows"></app-novo-componente>
• Dentro do novo componente não esqueça de declarar o @Input() rows: Product[] = [];

Nessa abordagem os templates ficariam assim:

arquivo: novo-componente.component.html

<p-table [value]="rows" responsiveLayout="scroll">

    <ng-template pTemplate="header">

        <tr>

            <th>Code</th>

            <th>Name</th>

            <th>Category</th>

            <th>Quantity</th>

        </tr>

    </ng-template>

    <ng-template pTemplate="body" let-row>

        <tr>

            <td>{{row.code}}</td>

            <td>{{row.name}}</td>

            <td>{{row.category}}</td>

            <td>{{row.quantity}}</td>

        </tr>

    </ng-template>

</p-table>

arquivo: novo-componente.component.ts

import { Component, OnInit } from '@angular/core';

import { Product } from '../grid/product';



@Component({

  selector: 'app-novo-componente',

  templateUrl: './novo-componente.component.html',

  styleUrls: ['./novo-componente.component.css']

})

export class NovoComponenteComponent {



    @Input()

     rows: Product[] = [];



}

arquivo: gridbase.component.html

<h1>Grid Base</h1>
<app-novo-componente [rows]="rows"></app-novo-componente>

arquivo: gridchild.component.html

<p>Grid Child works!</p>



<pre>{{rows | json}}</pre>



<app-novo-componente [rows]="rows"></app-novo-componente>