home.html
<ion-title *ngIf="!showSearchbar">
Likatkatә Miya Fal Hyel
<ion-buttons slot=“start” *ngIf="!showSearchbar">
<ion-searchbar [(ngModel)]=“searchTerm”
(ionChange)=“setFilteredItems()”
placeholder=“Search Song & title”
*ngIf=“showSearchbar”
showCancelButton= “always”
(ionCancel) = “showSearchbar=false”
>
<ion-buttons slot =“end” ion-button icon-only *ngIf="!showSearchbar" (click) =“showSearchbar=true”>
{{item.id}}
{{item.title}}
home.ts
import { Component, OnInit } from ‘@angular/core’;
import { DatabaseService, Song } from ‘…/services/database.service’;
import { Platform } from ‘@ionic/angular’;
import { HttpClient } from ‘@angular/common/http’;
import { Observable } from ‘rxjs’;
@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage implements OnInit {
song: Song = ;
songs: Observable<any>;
public items: any = ;
public filterItems = ‘’;
showSearchbar: boolean;
constructor( public http: HttpClient, private db: DatabaseService, private platform: Platform) {
this.platform.ready().then(() => {
}).catch(error => {
console.log(error);
});
}
ngOnInit() {
this.setFilteredItems();
this.db.getDatabaseState().subscribe(rdy => {
if (rdy) {
this.db.getSong().subscribe(content => {
this.song = content;
});
}
});
}
setFilteredItems() {
this.items = this.db.filterSearch(this.filterItems);
}
}
//This what i have been doing from order tutorials on my db.ts page
filterItems() {
return this.database.executeSql('SELECT * FROM song ', ).then(data => {
const items: Song = ;
if (data.rows.length > 0) {
for (let i = 0; i < data.rows.length; i++) {
items.push({
id: data.rows.item(i).id,
title: data.rows.item(i).title,
verse1: data.rows.item(i).verse1,
verse2: data.rows.item(i).verse2,
verse3: data.rows.item(i).verse3,
verse4: data.rows.item(i).verse4,
verse5: data.rows.item(i).verse5,
verse6: data.rows.item(i).verse6,
});
}
}
this.items.next(items);
});
}
filterSearch(filterItems) {
return this.items.filter(items => {
return items.id.toLowerCase().indexOf(filterItems.toLowerCase()) > -1
|| this.items.title.toLowerCase().indexOf(filterItems.toLowerCase()) > -1;
});
}
Please help me, i want to filter the list of songs on the home page.