3. Trouble with tutorial - Angular 2

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Trouble with tutorial - Angular 2

  • M

    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.

    0 1 Reply
  • Onsen UI

    @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.

    0
  • M

    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
    }
}
    0
  • M

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

    0