Is it possible to use the *ngFor filter of a parent component in a child component?

Asked

Viewed 28 times

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>
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.