How to create a search bar with Angular (typescript)?

Question

I have a code that is a Kanban and I need to apply a filter to find its titles (which for now is in the component), I would like to create a search bar that works only on the front end, because I will not run the API yet. follows below the HTML and Component codes.

<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>` 

and now the component

``  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', []),

])

Answer 1

I believe that the most practical way would be to use an existing library.

For angular I use Primeng (https://primefaces.org/primeng/showcase/#/setup)

Super easy to setup and has a dropdown module with very efficient filter:Dropdown (check filter option)

The code is simple, efficient and the look is beautiful.

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