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.

image

My code

<ion-card *ngFor="let data of dataArray" id="{{ data._id }}">
     <ion-card-content class="p-0">
         <ion-card-header>
            <ion-card-title>
              {{ data.title }}
            </ion-card-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>
          </ion-card-subtitle>
          <ion-card-subtitle>
            {{ data.description }}
          </ion-card-subtitle>
          </ion-card-header>

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

         <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-tab-button>
        </ion-item>

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

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($event.target.value)"></ion-searchbar>

JQuery code

 filterChannel(search: any) {
    $("ion-card-title").each(function () {
      if ($(this).text().indexOf(search) != -1) {
        $(this).closest("ion-card").removeClass('d-none');
      }
      else {
        $(this).closest("ion-card").addClass('d-none');
      }
    });
  }

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