Bom dia pessoal. Estou tendo o mesmo problema desse post aqui sem resposta. Alguém consegue me ajudar?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Bom dia pessoal. Estou tendo o mesmo problema desse post aqui sem resposta. Alguém consegue me ajudar?
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:
rowscomo parâmetro. Ex: <app-novo-componente [rows]="rows"></app-novo-componente>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>