Trouble with tutorial - Angular 2

mwaandah

I’m having trouble with implementing the “Combining navigator and tabbar”-tutorial. I’ve implemented something that looks exactly like the example, but it’s not possible to switch “active” pages, and the active page(Home) isn’t showing its content either.

As far as I can see, your example doesn’t run on your tutorial page either.

Have you done any recent updates?

We’re also having another problem. When we have been testing we also had a lot of errors of the type “template parse errors”, when it’s an ambiguity which ons-page we are refering to, but how can we make an ons-page unique? We for example get the error when using the “Splitter outside navigator” tutorial.

Fran Diox

@mwaandah The problem in the tutorial app is that those examples were still referencing angular2-onsenui library, which is the old version. They should point to ngx-onsenui correctly now. Looks like they work properly.

mwaandah

Thanks for your reply. I’m still having trouble with showing the content of the tabs and change the active tab.

Mobility component:

@Component({
    selector: 'app',
    template: "<ons-navigator [page]='homePage'></ons-navigator>"
})
export class MobilityComponent {
    homePage = Home;
}

Home component:

@Component({
    selector: 'ons-page',
    templateUrl: "./home.html"
})

export class Home {
    explore = Explore;
    global = Global;
    homemylist = HomeMyList;

    constructor() {
    }
}

Home.html

<ons-tabbar position="top">
        <ons-tab label="Explore" [page]="explore" active="true"> </ons-tab>
        <ons-tab label="Global" [page]="global"> </ons-tab>
        <ons-tab label="My List" [page]="homemylist"> </ons-tab>
        
</ons-tabbar>

Explore component


@Component({
    selector: 'ons-page', //Tried with ons-page[explore] too.
    template: "<p> hallo </p>"
})

export class Explore {
    constructor(private navigator: OnsNavigator) {
        console.log("EXPLORE")   //Doesn't run
    }
}

mwaandah

Seems like the problem is connected to that we used several components and just one module?