MANEIRA CORRETA DE ADICIONAR FILTRO NOS PROJETOS

Como visto em CRIANDO PIPES PUROS e CRIANDO PIPES IMPUROS os exemplos sao apenas para fins de aprendizado, em producao funcionalidades para filtrar arrays ou reorganizar elementos devem ser implementadas no codigo de components ou services por exemplo.

vamos tomar o mesmo exemplo, porem iremos implementar o filtro de livros diretamente no component, utilizando a mesma implementacao no pipe alterando apenas as referencias as variaveis para o escopo do component no metodo filtrarLivros().

component:

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

@Component({
  selector: 'app-filtro-maneira-correta',
  templateUrl: './filtro-maneira-correta.component.html',
  styleUrls: ['./filtro-maneira-correta.component.css']
})
export class FiltroManeiraCorretaComponent implements OnInit {

  livros: string[] = ['Angular', 'Java']

  filtro: any

  constructor() { }

  ngOnInit(): void {
  }

  addLivro(novoLivro: string){
    this.livros.push(novoLivro)
    console.log(this.livros)
  }

  // medoto que recebe a logica para filtrar
  filtrarCursos(){
    if(this.livros.length == 0 || this.filtro == undefined || this.filtro == ''){
      return this.livros
    }
    
    let filro = this.filtro.toLocaleString().toLocaleLowerCase()
    
    return this.livros.filter(
      (elementoASerComparado: string) => elementoASerComparado.toLocaleLowerCase().includes(this.filtro)
    );
  }

}

template do component:

<div>
    <h3>Maneira correta de adicionar filtro nos projetos</h3>
    <div>
        <input #inputLivro>
        <button (click)="addLivro(inputLivro.value)">Adicionar Livro</button>
    </div>
    <div>
        <input [(ngModel)]="filtro">
    </div>
    <ul> <!-- ngFor chama o metodo que retorna os cursos filtrados -->
        <li *ngFor="let livro of filtrarCursos()">
            - 
        </li>
    </ul>

</div>

O comportamento sera o mesmo do pipe impuro.