I can't use my functions that i created in my .ts - ionic2

Question

hi I'am new in ionic and i working with ionic 2. my problem is :
I have write the functions in my about.ts this function run well (i have test this in the constructor of the page) but when i call this in about.html, nothing of this functions run. (sorry i don't speak english well)
that is my about.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {Contacts, Contact} from 'ionic-native';
import { AlertController } from 'ionic-angular';
//, ContactField
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
private customColor:string[] = ["#f44336", "#3f51b5", "#2196f3", "#009688", "#4caf50"];
// index qui nous permet de changer de couleur
private indexColor:number = 0;
// les contactes trouvés
public allContacts:Contact[];
public findItem:string;
constructor(public navCtrl: NavController,public alertCtrl: AlertController) {
this.findContact('');
this.openModal();
}
/** Suppression d'un contact */
public delete(contactToDelete:Contact):void{
contactToDelete.remove().then(()=>this.findContact(''));
}
public getCustomColor():string{
let color:string = this.customColor[this.indexColor];
this.indexColor++;
if(this.indexColor === 5){
this.indexColor = 0;
}
return color;
}
/** Ouverture de la modale pour la création de contact */
public openModal():void{
//let modal = Modal.create(CreateContact);
// this._navController.present(modal);
// modal.onDismiss(data => {
// this.allContacts.push(data);
// });
let alert = this.alertCtrl.create({
title: 'soty',
subTitle: 'rost',
buttons: ['OK']
});
alert.present();
}
/** Méthode pour effectuer la recherche de contact */
public findContact(value:any){
let alert = this.alertCtrl.create({
title: value,
subTitle: value,
buttons: ['OK']
});
alert.present();
let fn = value === undefined ? '' :value;
Contacts.find(['displayName', 'phoneNumbers'], {
filter:fn,
hasPhoneNumber:true
}).then(data => {
this.allContacts = data;
});
}
/** Création des initiales sur 2 lettres */
public getCustomInitial(value):string{
let names:string[] = value.split(' ');
let firstName = '';
let secondName = '';
if(names[0] != undefined){
firstName = names[0].substring(0,1);
}
if(names[1] != undefined){
secondName = names[1].substring(0,1);
}
return firstName + secondName;
}
}
that is my about.html
<ion-header>
<ion-navbar>
<ion-title>
Gestion des contacts
</ion-title>
<ion-buttons start>
<button (click)="openModal()">
<ion-icon ios="ios-add" md="md-add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding class="page1">
<ion-item>
<ion-input
type="text"
placeholder="rechercher"
[(ngModel)]="findItem"
(Change)="findContact($event)"></ion-input>
</ion-item>
<ion-list>
<ion-item-sliding *ngFor="let contact of allContacts">
<ion-item class="bloc-contact">
<ion-avatar item-left>
<span
class="initial" [style.background] = "getCustomColor()">
{{ getCustomInitial(contact.displayName) }}
</span>
</ion-avatar>
<h2>{{contact.displayName}}</h2>
<div *ngFor="let phone of contact.phoneNumbers">
<ion-item *ngIf="phone.type == 'mobile'" class="line">
<ion-icon ios="ios-phone-portrait" md="md-phone-portrait"></ion-icon>
Mobile
<ion-badge teal item-right>{{phone.value}}</ion-badge>
</ion-item>
<ion-item *ngIf="phone.type == 'home'" class="line">
<ion-icon ios="ios-home" md="md-home"></ion-icon>
Home
<ion-badge green item-right>{{phone.value}}</ion-badge>
</ion-item>
</div>
</ion-item>
<ion-item-options>
<button danger (click) = "delete(contact)">
<ion-icon name="trash"></ion-icon>
Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
somebody can help me please

Answer 1

there is no problem with openModal() and the way you call it; but you must use this for your input event:
<ion-input type="text" placeholder="rechercher" [(ngModel)]="findItem" (input)='findContact($event.target.value)'>