CODEWITHSUNDEEP
htmltypescriptionic-frameworkcontrollerionic2
Karolina Bagrowska
Karolina Bagrowska

Reputation: 33

navCtrl navigation to next page ionic

I have some issue with my code. Can't navigate from home page to for example about page. The application is in ionic framework. Totally new in this technology. In console no warnings and errors. home.ts

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { Auth } from '@ionic/cloud-angular';
import { User } from '@ionic/cloud-angular';
import { LoginPage } from '../login/login';
import { About } from '../about/about';
import { ChatPage } from '../chat/chat';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController,  public auth: Auth, public user: User) {
    console.log(user);
  }

  logout() {
      this.auth.logout();
      this.navCtrl.setRoot(LoginPage);
    }

   about(){
      this.navCtrl.setRoot(About);
    }

    chat(){
      this.navCtrl.setRoot(ChatPage);
    }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Home
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="logout()">
        <ion-icon name="exit"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome back, {{ user.details.name }}</h2>
  <p>
    <button ion-button color="secondary" block>Something</button>
  </p>
  <p>
    <button ion-button color="secondary" block [navPush]="ChatPage">Chat</button>
  </p>
  <p>
    <button ion-button color="secondary" block [navPush]="About">About</button>
  </p>
</ion-content>

about.ts

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

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

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad About');
  }

}

about.html

<ion-header>

  <ion-navbar>
    <ion-title>about</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="about">
  This is my super awesome about page.
</ion-content>

Upvotes: 1

Views: 1481

Answers (1)

Khurram
Khurram

Reputation: 695

One possible and easy solution is call method on click of button. As you are defining about() method in home.ts now call this method on click of button. just update code in home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Home
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="logout()">
        <ion-icon name="exit"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome back, {{ user.details.name }}</h2>
  <p>
    <button ion-button color="secondary" block>Something</button>
  </p>
  <p>
    <button ion-button color="secondary" block (click)="chat()">Chat</button>
  </p>
  <p>
    <button ion-button color="secondary" block (click)="about()">About</button>
  </p>
</ion-content>

Upvotes: 2

Related Questions