Have Onsen-toolbar inside Angular components



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

Log in to reply