I am trying to add a search-bar to my list but I failed each time
my .html file
<ion-header>
<ion-toolbar class="new-background-color">
<ion-title>
<ion-text color="light">
<h4> my app</h4>
</ion-text>
</ion-title>
<ion-buttons slot="start">
<ion-menu-button autoHide="false" style="
color: white;
"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-refresher slot="fixed"
(ionRefresh)="ionRefresh($event)"
(ionPull)="ionPull($event)"
(ionStart)="ionStart($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="refresh"
refreshingSpinner="circles"
refreshingText=" ،،،Refreshin>
</ion-refresher-content>
</ion-refresher>
<div style="
align-content: center;
justify-content: center;
align-items: center;
height: 50px;
background-color: #3357a7;
font-size: large;
font-weight: bold;
color: #ffc95b;
margin-bottom: 10px;
margin-top: 10px;
text-align: center;
">
<ion-label style="
margin: auto;
position: absolute;
top: 30px; left: 0; bottom: 0; right: 0;
">
all content
</ion-label>
</div>
<div style="
align-content: center;
justify-content: center;
align-items: center;
font-size: large;
font-weight: bold;
margin-bottom: 10px;
margin-top: 10px;
text-align: center;
">
</div>
<ion-grid class="mygrid">
<ion-row class="my-item" *ngFor="let item of dataArray;let i=index" (click)="gotoNext(i)">
<ion-col size="4">
<ion-thumbnail>
<img src="https://qateef-ads.co/uploads/{{ item.document }}" alt="your image">
</ion-thumbnail>
</ion-col>
<ion-col size="6">
<ion-row class="myitems">
<p><strong> {{ item.title }} </strong> </p>
</ion-row>
<ion-row size="6" class="myitemsc">
<p> {{ item.city }} </p>
<p class="myitemstime"> {{ checktime(item.time) }} </p>
</ion-row>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
my .ts file
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router,NavigationExtras } from '@angular/router';
import { LoadingController } from '@ionic/angular';
import * as moment from 'moment';
@Component({
selector: 'app-tab2',
templateUrl: './tab2.page.html',
styleUrls: ['./tab2.page.scss'],
})
export class Tab2Page implements OnInit {
dataArray;
constructor(private http: HttpClient,private router: Router,public loadingController: LoadingController) {
}
async ngOnInit() {
const loading = await this.loadingController.create({
message: 'working....'
});
await loading.present();
this.http.get('https://mysite.co/apis/all.php').subscribe(async (response: any) => {
await loading.dismiss();
console.log(response);
this.dataArray = response;
});
}
async ionRefresh(event) {
const loading = await this.loadingController.create({
message: 'working....'
});
await loading.present();
console.log('Pull Event Triggered!');
this.http.get('https://mysite.co/apis/all.php').subscribe(async (response: any) => {
await loading.dismiss();
console.log(response);
this.dataArray = response;
event.target.complete();
});
}
gotoNext(index) {
localStorage.setItem('detail', JSON.stringify(this.dataArray[index]));
this.router.navigate(['/details']);
}
ionPull(event) {
console.log('ionPull Event Triggered!');
}
ionStart(event) {
console.log('ionStart Event Triggered!');
}
checktime(dttime)
{
return moment(dttime).fromNow().toString();
}
}