I’m using the ons-toolbar on every page in my mobile application. I would, therefore, like to have an Angular-toolbar component. So I made a component with the selector toolbar, where I included the code for an Onsen toolbar. When I did this approach, I had the problem that the position of the toolbar changed, so it lays on top of the tab bar(which was also on the page) and overlapped. It looked like this:

page.component.ts
<toolbar></toolbar>

toolbar.component.ts
@Component({
selector: ‘toolbar’,
templateUrl: ‘./toolbar.component.html’
})

toolbar.component.html
<ons-toolbar>
<div class=“center” *ngIf=“heading”>
HEADING GOES HERE
</div>
</ons-toolbar>

Then I tried to have an onsen-toolbar, and an Angular component called toolbar. This also caused problems, as the elements in the left, right and center position went all kind of different places. (Seems like the CSS must have the classes as direct descendants?)

page.components.ts
<ons-toolbar>
<toolbar></toolbar>
</ons-toolbar>

toolbar.component.ts
@Component({
selector: ‘toolbar’,
templateUrl: ‘./toolbar.component.html’
})

toolbar.component.html
<div class=“center” *ngIf=“heading”>
HEADING GOES HERE

</div>

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

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
    }
}

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.