header_angular

New .component(…) method in Angular 1.5

The new .component method available in Angular 1.5.x simplify the creation of custom components (also knows as directives in the Angular world). If this were not enough to decide to use it, Angular 2 will use a similar syntax to create components so I really suggest you to take a look to this topic ;).

In the following snippet I create a simple collapsable panel ( powered by Bootstrap 4 alpha: Card ): the body of the panel is hidden or shown when user clicks the header bar.

Check out this Pen!

Usage:

Getting data from controller:

<panel title="ctrl.title"> {{ctrl.body}} </panel>

or with static DOM:

<panel title="'MY PANEL'">
  <h4 class="card-title">My title</h4>
  <p class="card-text">additional content....</p>
  <a href="#" class="btn">Go</a>
</panel>

The panel component:

.component('panel', {
  bindings: {
    title: '=' 
  },
  transclude: true,
  template: [
    '<div class="card">',
     '<div class="card-header" ng-click="$ctrl.toggle()"> {{$ctrl.title}} </div>',
     '<div class="card-block" ng-class="{hide: !$ctrl.opened}" ng-transclude></div>',
    '</div>'
  ].join(''),
  controller: function() {
    this.opened = false;
    this.toggle = function () {
      this.opened = !this.opened;
    }
  }
})

KEY POINTS

- scope isolation (enabled by default): the component receives and displays the title property
- transclusion: use ng-transclude and set the property transclude to true
- binding properties: the template uses the opened property with ng-class to display/hide content
- controllerAs: automatically generated. Accessible from your template using $ctrl
- invoking components’ methods from the template

RESOURCES

The best introduction I have read so far about this topic is by Todd Motto so I really suggest you to read his article.

Comments (4)

  1. Peter Bacon Darwin (reply)

    March 29, 2016 at 2:27 pm

    Hi Fabio
    Thanks for putting this together. Can you please check the documentation since we made some changes since 1.5.0-beta, such as the default controllerAs value is now `$ctrl`

    1. Fabio Biondi (reply)

      March 29, 2016 at 8:10 pm

      Hi Peter,
      it’s very complicated to follow all the breaking changes of Angular 1.x, 2, React and so on, so thank you very much for the suggestion. It’s really appreciated.
      I have updated the example and the post above in order to work with RC2. So now I use $ctrl (cool! much better than the component name ; ) and I made a minor change about the transclusion. Please let me know if it’s ok : )

      For the curious, this is the link of the previous snippet (Angular 1.5 RC0)
      http://codepen.io/fabiobiondi/pen/GomQQq?editors=0010

      Thank you for your amazing work, guys. Here in Italy we all love Angular ;)

  2. manaharan (reply)

    March 29, 2016 at 4:24 pm

    Hi Fabio,

    Nice directive creation with component method.

    1. Fabio Biondi (reply)

      March 29, 2016 at 8:11 pm

      Hi Manaharan, thank you. Just updated in order to work with Angular 1.5 RC2 as suggested by Peter :)

Leave a Reply

Your email address will not be published. Required fields are marked *

Published on: 27 March 2016
Posted by:
Discussion: 4 Comments