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