Add an "entry" page without the Tabs of the template


#1

Hello folks,

I started Ionic 3 with the base template “Tabs”. I created the pages and link them to navigation that’s ok.
But now, if I want to do a new page (like a login one and a presentation page) they will have the nav Tabs, right ?
My questions are "How to simply add a page without any template (basically a blank page that I can edit/add some stuff) ? and a link to my “Tabs” template ?
Thank’s for your help !


#2

Change the value of rootPage in app.component.ts from TabsPage to WhateverPage. Then on WhateverPage, when appropriate, set the root to TabsPage.


#3

If I understand…

[app.component.ts]

/* import { TabsPage } from '../pages/tabs/tabs'; */
import { Login } from '../pages/login/login';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
/*  rootPage:any = TabsPage; */
    rootPage:any = Login;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      [..]
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}
[../pages/login/login.ts]

import { Component } from '@angular/core';

@Component({
    selector: 'page-login',
    templateUrl: 'login.html'
})
export class Login {
    constructor() {

    }
/* put something here */
}

What I must write for change the setting of the login page ?

Thank’s for the reply !


#4

LoginPage (I’d change Login class to LoginPage for clarity, in line with HomePage, TabsPage etc), notice new import lines and @ViewChild then this.nav.setRoot()

import { Component } from '@angular/core';
import { Nav } from 'ionic-angular';
import { TabsPage } from '../pages/tabs/tabs';

@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {

 @ViewChild(Nav) nav: Nav; 

 constructor() { }

 goToTabs(){
  this.nav.setRoot(TabsPage);
 }
}

Hope this helps :slight_smile:


#5

I would do this differently. Instead of calling setRoot(), I prefer conditionally setting the app component’s rootPage based on an Observable in an authentication service.


#6

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.


#7

Thank’s for all your reply !

@Sheepish Apparently he don’t like the line " @ViewChild(Nav) nav: Nav; " it says “Cannot find name ‘ViewChild’.”

@rapropos I’ll do this later when I’ll have a backend :slight_smile:


#8

Sorry I missed an import. If you ever have an issue like this it’s always an idea to look up the documentation and find an example of it’s usage and 9/10 it’s something simple like this :slight_smile:


#9

@Sheepish I tried to test the link between this page and the navigation tabs but i’ve an error “Cannot read property ‘setRoot’ of undefined”. I probably miss something but I cannot figured out where (Sorry I’m a newbie with Ionic).

<ion-content padding>
  <h2>Login</h2>
  [...]
  <button ion-button (click)="goToTabs()">Button</button>
</ion-content>

#10

Sorry I missed something else. See “Navigating from the Root component” in the link below about adding a reference variable to in app.html.

Ionic NavController Documentation


#11

@Sheepish When I put the reference, it automatically redirect to “GoToTabs” navigation without showing the login screen ><


#12

@Zedaka, would you mind showing what your code looks like now?


#13

@Sheepish I reverted back my changes atm. I’ll try to do what I did when I’ll be less busy…


#14

@Sheepish I can’t reproduce what I did yesterday.
login.ts
import { Component, ViewChild } from ‘@angular/core’;

import { Nav } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';

@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class Login {

 @ViewChild(Nav) nav: Nav; 
 constructor() { }

 goToTabs(){
  this.nav.setRoot(TabsPage);
 }
}

login.html

  <h2>Login</h2>
  [...]
<button ion-button (click)="goToTabs()">test</button>
</ion-content>