CODEWITHSUNDEEP
angularjstypescriptionic-frameworkionic2
HelmBurger
HelmBurger

Reputation: 1298

Page doesn't open on clicking in side menu - ionic 2 app

I am unable to open a page upon clicking it in side menu.

This is my app.component.ts:

this.pages = [
                { title: 'NFC Page', component: NfcPage, note: 'NFC Page' },
                { title: 'Student Details', component: StudentDetails, note: 'Student Details' },
    ];

This is my app.module.ts:

@NgModule({
  declarations: [
    StudentDetails,
    NfcPage,
],
entryComponents: [
    StudentDetails,
    NfcPage,
  ],

This is my nfc.ts page:

 import {Component} from '@angular/core';
    import {IonicPage, NavController, NavParams} from 'ionic-angular';
    import {NFC, Ndef} from '@ionic-native/nfc';

    @IonicPage()
    @Component({
        selector: 'page-nfc',
        templateUrl: 'nfc.html',
    })
    export class NfcPage {

        constructor(public navCtrl: NavController,
                    public navParams: NavParams,
                    private nfc: NFC,
                    private ndef: Ndef) {
}
}

This is my nfc.html page:

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>NFCPage</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <p>NFC Page!</p>
</ion-content>

Student details page opens fine but when I click "Nfc page", nothing happens.

Upvotes: 1

Views: 666

Answers (2)

PRIYA PARASHAR
PRIYA PARASHAR

Reputation: 777

for open the page through the side menu you need to make that page as a rootpage when you click on the side menu option.You may find the below code:-

app.html:

<ion-menu id="myMenu" [content]="mycontent" >
    <ion-content>
        <ion-list>
            <ion-item  ion-item small menuClose  (click)="nav.setRoot(pages.nfc)">
                <ion-icon name="home" item-left menuClose ></ion-icon> NFC 
            </ion-item > 
                <ion-item small menuClose  (click)="nav.setRoot(pages.std_detils)">
                <ion-icon ios="ios-contact" md="ios-contact" item-left ></ion-icon> Student Details
            </ion-item> 
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

app.component.ts:

this.rootPage = NfcPage;
  this.pages = {
        "nfc": NfcPage,
        "std_detils": StudentDetails,

      };

Upvotes: 1

HelmBurger
HelmBurger

Reputation: 1298

I have managed to find a solution. The problem is in the constructor of nfc.ts module. The two private parameters (private nfc: NFC and private ndef: Ndef) seem to be broken from the plugin that I am using. I removed these two parameters from the constructor and I was able to open the page. Sadly there was no exception thrown in the console or anywhere else. Hope it helps someone.

Upvotes: 0

Related Questions