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 !
Change the value of rootPage in app.component.ts from TabsPage to WhateverPage. Then on WhateverPage, when appropriate, set the root to TabsPage.
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 !
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 
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.
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.
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
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 
@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>
Sorry I missed something else. See “Navigating from the Root component” in the link below about adding a reference variable to in app.html.
@Sheepish When I put the reference, it automatically redirect to “GoToTabs” navigation without showing the login screen ><
@Zedaka, would you mind showing what your code looks like now?
@Sheepish I reverted back my changes atm. I’ll try to do what I did when I’ll be less busy…
@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>