Create DOM filter on Ionic / Angular ion-card

Ionic project has an ion-card and it is working normally, problem is that the list is growing and I need to set up a field to filter a search, is there any native way in ionic to do this? Or I have to use JQuery for example.


My code

<ion-card *ngFor="let data of dataArray" id="{{ data._id }}">
     <ion-card-content class="p-0">
              {{ data.title }}
            <ion-card-subtitle *ngIf="data.protocol" id="{{data.protocol}}">
                {{ data.protocol }}
            <ion-icon name="copy-outline" (click)="copyProtocol(data.protocol)" class="ml-2"></ion-icon>
            {{ data.description }}

          <ion-item lines="none" class="ion-float-left">
             {{ data.updatedAt | localDatetime }}

         <ion-item lines="none" class="ion-float-right">
         <ion-tab-button (click)="menu(data._id, data.title, data.description, data.visibility)">
         <ion-icon name="ellipsis-vertical-outline"></ion-icon>

     <ion-item lines="none" *ngIf="data.marking" class="w-100">
     <ion-label class="w-100" *ngIf="data.marking">{{ data.marking }}</ion-label>

I created a filter using JQuery, basic filter, maybe someonte can help to improve :slight_smile:

But this search is case sensitive. I am looking to solve, if someone have any idea.

<ion-searchbar (ionInput)="filterChannel($"></ion-searchbar>

JQuery code

 filterChannel(search: any) {
    $("ion-card-title").each(function () {
      if ($(this).text().indexOf(search) != -1) {
      else {

Better not mix jQuery with Angular, especially not for DOM operations.

Use array filter function and then let Angular change detector filter the view automagically for you

  <ion-searchbar animated debounce="500" type="text" [placeholder]="searchText" (ionChange)="searchChange($event)">
 searchChange(event) {
    let searchval = '';
    if (event.detail && event.detail.value) {
      searchval = event.detail.value;

... do you filterlogic on the array here using the searchval


Other example:

Good @Tommertom … After update the code I will share, another person can need :slight_smile: Thanks.

1 Like