Component.js

export default function Component ({
    restrict = "E",
    replace = true,
    scope = {},
    bindToController = {},
    controllerAs = "ctrl",
    controller = () => {},
    template = null,
    link = () => {},
    transclude = false
    } = {}) {

    return {
        restrict: restrict,
        replace: replace,
        scope: scope,
        bindToController: bindToController,
        controllerAs: controllerAs,
        controller: controller,
        template: template,
        link: link,
        transclude: transclude
    }

}

ScreenToolbar.js

import Component from "util/Component"

import "./ScreenToolbar.css"

export default Component({

    transclude: true,

    bindToController: {
      screenTitle: "@"
    },

    template: `
        <md-toolbar class="Screen__Toolbar">
            <h1 class="md-toolbar-tools">
                <MenuButton />
                <ScreenTitle>{{ctrl.screenTitle}}</ScreenTitle>
                <span layout="row" flex ng-transclude></span>
                <User />
            </h1>
        </md-toolbar>
    `
})