In Angular 1.5, how to bind an attribute component as boolean?

Question

I would like to know if in Angular 1.5, when you use components, there is a simple way to bind an attribute which is a boolean without be converted as string with @.

For example, I have two components "app-menu" and "app-menuitem" without transclude. "app-menu" has only one attribute with is a list of items to create "app-menuitem".

<app-menu items="menuitems">

in the menuitems which is a json, you have an attribute by menuitem named "isactive" which a boolean value.

$scope.menuitems = [{ label : 'menuitem 1', isactive : true},{ label : 'menuitem 1', isactive : false}]

In the menuitem component :

angular.module('app')
    .component('appMenuitem', {
      transclude: false,
      controller: menuitemController,
      bindings: {
        label: '@',  
        isactive: '@' //<--- The problem is here because the boolean is converted as string
      },
      templateUrl: 'angular/components/simple/menuitem/menuitem.html'
    });

I don't know the best way to be sure at the end is a real boolean, not a string which makes me some bugs. Anyone has an idea ?

Answer 1

In angular 1.5 onwards you can use < & @ for one way binding. The main differnece between these two is < has ability to pass an object with its original data type to component.

isactive: '<'