Navigation Problem to other pages

i am using following code which is working fine in browser but not working in mobile.
i am clicking but it is showing no response.

import {detailpage} from …
TS page1

[code]

detail:any;
constructor( public nav:NavController)
{
this.detail:detailpage;
}

CODE OF HTML FILE
<button [navPush]="detail>Detail Page

i TRIED SECOND way but it not showing anything on page

TS File

detailChanged: Boolean = false;
addChanged: Boolean = false;
eventdetailmodel: any;
constructor(public nav: NavController) {

}

navigate(input) {
    let n1 = input.inputControl.name;
    this[n1 + "Changed"] = true;
    if (this.detailChanged) {
        this.nav.push(EventDetailModel);
        
    }
    else if(this.addChanged){
        this.nav.push(EventAddModel);

    }
}

HTML File
<button #detail [ngModel]=“detail” (click)=“navigate(detail)” ngControl=“detail” >Detail

<button #add [ngModel]=“add” (click)=“navigate(add)” ngControl=“add” >Detail