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.

Usage:

Getting data from controller:

or with static DOM:

the panel component:

KEY POINTS

  • scope isolation (enabled by default): the component receives and displays the title property
  • transclusion: the content is transcluded and used in the body of the template
  • binding properties: the template uses the opened property with ng-class to display/hide content
  • controllerAs: now is automatically created with the same name of the component (you can customize it too)
  • 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.

Fabio Biondi

I am an italian developer with over 10+ years of experience in developing custom user interfaces and interactive applications for any screen and device using the latest web technologies - HTML5, SVG, Canvas, ES2015, CSS3 - the latest libraries - React, AngularJS, D3.js, CreateJS - and many other tools - Gulp, WebPack, LESS/SASS but also Sketch, Balsamiq, PS and AI.