Menambahkan Searchbar pada List Detail Menu

Add Searchbard Ionic3

Pada tutorial kali ini kita akan melanjutkan dengan menambahkan searchbar pada list menu untuk memfilter data menu yang tampil.

Baca Tutorial Sebelumnya : Menampilkan data dari provider

Karena pada tutorial sebelumnya kita menampilkan data langsung dari provider sekarang kita copy datanya ke controller agar yang terfilter tidak sumber datanya secara langsung, caranya edit /src/pages/menu-detail/menu-detail.ts tambahkan variabel data dengan tipe any[] lalu pada constructor load data dari provider

Ionic 3 Load data from provider

kemudian tambahkan juga function untuk filter data berdasarkan nama menu seperti berikut:

Ionic 3 Filter Data

 Edit view di /src/pages/menu-detail.html dengan mengganti sumber data ngFor yang sebelumnya diambil langsung dari provider sekarang diambil dari controller biar bisa di filter nantinya, tambahkan pula ion-navbar untuk textbox pencariannya pada bagian atas list

Ionic 3 Add ion-searchbar and filtering data

Sekian tutorial saya kali ini semoga bisa bermanfaat.