3. Have Onsen-toolbar inside Angular components

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.

Have Onsen-toolbar inside Angular components

  • M

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