1

Tenho um código que é um kanban e preciso aplicar um filtro para buscar os titulos dele (que por enquanto está no componente), gostaria de criar uma barra de pesquisa que funcionasse apenas no front-end, pois ainda não irei espetar a API. segue abaixo os codigos do HTML e do Componente.

<div class="board">

      <div class="board-bar">
        <p class="board-name"></p>
      </div>

      <div class="board-wrapper">
        <div class="board-column" cdkDropListGroup>
          <div class="board-column" *ngFor="let column of board.column">



            <div class="column-title">
              {{column.name}}
            </div>
            <br />
            <!-- pesquisa  -->
            <div class="input-group input-group-sm mb-3">
              <div class="input-group-prepend">
                <button class="fa fa-search" type="submit"></button>
              </div>
              <input type="text" class="form-control" id="pesquisa" placeholder="Busca...">
            </div>


            <cdk-virtual-scroll-viewport style="height: 600px" itemSize="100">
              <div class="task-container " cdkDropList [cdkDropListData]="column.tasks"
                (cdkDropListDropped)="drop($event)">
                <div class="task" id="lista" *ngFor="let item of column.tasks" cdkDrag>
                  {{ item }}
                </div>

              </div>

              <div class="task-container" cdkDropList [cdkDropListData]="column.tasks"
                (cdkDropListDropped)="drop($event)">
                <div class="task" cdkDrag></div>
              </div>
            </cdk-virtual-scroll-viewport>
          </div>


        </div>
      </div>

    </div>` 

e agora o componente

``  board: Board = new Board('Empresas', [
new Column('Empresas não Selecionada', [
  "Vermelhão",
  "Super Tonello",
  "Estoque",
  "Andreazza",
  "Wallmart",
  "Ortobom",
  "Vermelhão",
  "Super Tonello",
  "Estoque",
  "Andreazza",
  "Wallmart",
  "Ortobom",
  "Vermelhão",
  "Super Tonello",
  "Estoque",
  "Andreazza",
  "Wallmart",
  "Ortobom",
]),

new Column('Empresas Selecionada', []),

])

1 Resposta 1

0

Acredito que a forma mais prática seria utilizar uma biblioteca já existente.

Para angular costumo usar a PrimeNG (https://primefaces.org/primeng/showcase/#/setup)

Super fácil de realizar o setup e possui um módulo de dropdown com filtro muito eficiente:Dropdown (verificar a opção com filtro)

O código fica simples, eficiente e o visual é bonito.

<h5>Content with Filters</h5>
<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
    <ng-template pTemplate="selectedItem">
        <div class="country-item country-item-value"  *ngIf="selectedCountry">
            <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" />
            <div>{{selectedCountry.name}}</div>
        </div>
    </ng-template>
    <ng-template let-country pTemplate="item">
        <div class="country-item">
            <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
            <div>{{country.name}}</div>
        </div>
    </ng-template>
</p-dropdown> 
3
  • Muito Obrigado, irei testar e passarei o feedback Commented 5/02/2021 às 15:03
  • Uso PrimeNg a bastante tempo, caso precise de ajuda é só falar. Mas realmente não tem segredo.
    – JipsyT
    Commented 5/02/2021 às 15:07
  • o primeNG acabou não funcionando legal aqui :/ Commented 5/02/2021 às 19:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .