Monaca Onsen UI Discord Chat Github Repo

Onsen v2 with Angular 1.5 component

  • I am trying to use the new component with Angular 1.5. Unfortunately, it is not rendering correctly with the Onsen components. For example, I wanted to create a toolbar component. However, the properties won’t bind to <ons-toolbar>

    Declared on my pages like so:

    <shared.components.toolbar left="menu" center="Home Page" right=""></shared.components.toolbar>

    The component html:

            <div class="left">
                <!-- Toolbar-button with different icons depending on the platform. -->
                <ons-toolbar-button component="button/menu">
                    <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
            <div class="center">{{}}</div>
            <div class="right">

    The component js:

    angular.module('theApp').component('shared.components.toolbar', {
        templateUrl: './app/shared/components/toolbar.html',
        controller: toolbarController,
        controllerAs: 'toolbar',
        bindings: {
            left: '@',
            center: '@',
            right: '@'
    function toolbarController() {
        var vm = this;

    Howver, it renders the page title as {{}} instead of binding correctly. Any ideas?

  • Onsen UI

    @kevinashkore Angular 1.5 components haven’t been tested with Onsen UI so far. I guess they introduced it to make it more similar to Angular 2 and so developers can migrate their apps later on.
    We will check this at some point but it’s not a priority right now. Any insight you have about this is welcome, especially in the shape of PRs!