0
I wonder if it is possible to use the filter
of *ngFor
to filter the items of a table that is inside the parent component and the input
search that is inside the child component and show the result inside the parent component.
In the case of the following code, if possible, as should be done?
Component Pai:
<table class="table">
<thead class="thead-dark">
<tr>
<th>#</th>
<th scope="col">ID</th>
<th scope="col">Titulo</th>
<th scope="col">Descricao</th>
<th scope="col">Valor</th>
<th scope="col">Disponibilidade</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let livro of livros | filter:filter">
<td scope="col">#</td>
<td scope="col">{{livro.id}}</td>
<td scope="col">{{livro.titulo}}</td>
<td scope="col">{{livro.descricao}}</td>
<td scope="col">{{livro.preco}}</td>
<td scope="col">{{livro.disponivel}}</td>
<th>#</th>
</tr>
</tbody>
</table>
Component Filho:
<br>
<div>
<form style="width: 500px; margin-left: 50px;" [formGroup]="novoitem" (ngSubmit)="cadastraLivro()">
<h3>Formulário De Novos Itens</h3>
<div class="form-row">
<div class="form-group col-md-6">
<label>Titulo:</label>
<input type="text" formControlName="titulo" class="form-control" placeholder="Titulo">
</div>
</div>
<div class="form-group">
<label>Descrição:</label>
<textarea type="text" formControlName="descricao" class="form-control" placeholder="Descrição"></textarea>
</div>
<div class="form-group">
<label>Valor:</label>
<input type="text" formControlName="preco"class="form-control" placeholder="Valor">
</div>
<div class="form-check">
<td><input type="checkbox" class="form-check-input" formControlName="disponivel"> <label class="form-check-label" checked>Produto Disponível</label></td>
</div>
<div>
<label>Editar ID:</label>
<input type="text" formControlName="id" class="form-control" placeholder="Editar ID">
</div>
<button type="submit" class="btn btn-success">Criar</button>
<button style="margin: 10px;" class="btn btn btn-primary" (click)="atualizarItem()" type="button">Atualizar</button>
<button style="margin: 10px;" class="btn btn-danger" (click)="excluirLivro()" type="button">Excluir</button>
</form>
</div>
The input that should make the filter is this:
<div>
<label>Editar ID:</label>
<input type="text" formControlName="id" class="form-control" placeholder="Editar ID">
</div>