Write AngularJS like a pro. Angularjs Icon

Follow the ultimate AngularJS roadmap.

Stateless Angular components

There were a tonne of interesting changes happening in the beta and release candidate phases of AngularJS 1.5, one of them was the introduction of the Component method, which saw one-way bindings also introduced. We’ve also got the power to create stateless components.

What is a stateless component?

In React, we have stateless components that merely serve as a template that we want to clone and just pass data into, no state or Model is manipulated inside of them.

Stateless components in Angular

With the official 1.5 release, we can create stateless functions very similar to React’s implementation, and I love this.

Let’s assume we have a list of people, and we want to render their name and age using some sort of template to iteration over the collection.

When using the .component() method, we might create something like this:

// usage: 
var NameComponent = {
  bindings: {
    name: '=',
    age: '='
  },
  template: [
    '<div>',
      '<p>Name: {{$ctrl.name}}</p>',
      '<p>Age: {{$ctrl.age}}</p>',
    '</div>'
  ].join('')
};

angular
  .module('app', [])
  .component('nameComponent', NameComponent);

Let’s add some data to another Controller and actually render this awesome component.

Angular Directives In-Depth eBook Cover

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

  • Green Tick Icon Observables and Async Pipe
  • Green Tick Icon Identity Checking and Performance
  • Green Tick Icon Web Components <ng-template> syntax
  • Green Tick Icon <ng-container> and Observable Composition
  • Green Tick Icon Advanced Rendering Patterns
  • Green Tick Icon Setters and Getters for Styles and Class Bindings

Please note: this example is using version 1.5.0-rc.0

Ummm, why isn’t it rendering my values? Argh!

At this point, we were all rushing to try out the new .component() method in the beta or rc stage, and realised to make any of this new Directive abstraction we need to bind a Controller to it (because of the underlying implementation):

// usage: 
var NameComponent = {
  bindings: {
    name: '=',
    age: '='
  },
  controller: angular.noop, // or function () {} whatever
  controllerAs: '$ctrl',
  template: [
    '<div>',
      '<p>Name: {{$ctrl.name}}</p>',
      '<p>Age: {{$ctrl.age}}</p>',
    '</div>'
  ].join('')
};

angular
  .module('app', [])
  .component('nameComponent', NameComponent);

And now it renders:

Okay, well that’s extremely annoying, I need to bind a controller and declare the controllerAs property to get things to render.

So we ended up adding these empty Controllers to make things “work”, which isn’t pretty.

1.5 stable saves the day

The ability to not specify a Controller is available in the stable AngularJS 1.5 release! This means we can do exactly this without a Controller:

// usage: 
var NameComponent = {
  bindings: {
    name: '=',
    age: '='
  },
  template: [
    '<div>',
      '<p>Name: {{$ctrl.name}}</p>',
      '<p>Age: {{$ctrl.age}}</p>',
    '</div>'
  ].join('')
};

angular
  .module('app', [])
  .component('nameComponent', NameComponent);

And breathe, sanity is restored. Just like passing in props in React, we have the ability to merely pass properties into Angular components.

We no longer need a Controller as we were getting used to in the release candidate stages of the .component() method.

Voila:

Components can now just act as stateless templates, and that’s awesome and lightweight.

Caveats

The only caveat to this implementation is being forced to use $ctrl in your templates, which kind of seems crazy as you’re not technically using a Controller. You could override it with the controllerAs property, but we’re back to the start then.

Learn Angular the right way.

The most complete guide to learning Angular ever built.
Trusted by 82,951 students.

Todd Motto

with Todd Motto

Google Developer Expert icon Google Developer Expert

Related blogs 🚀

Free eBooks:

Angular Directives In-Depth eBook Cover

JavaScript Array Methods eBook Cover

NestJS Build a RESTful CRUD API eBook Cover