Angular Components: from AngularJS to “just Angular”

  • .component() is a great addition to Angular.
  • According to the official documentation, a Component is like a Directive
  • When the component elements have been compiled and are ready to go, this hook will be fired; It can help us to implement some functionality that depends on the component elements to be fully compiled.
  • $onInit() is executed when all controllers on the element have been constructed and after their bindings are initialized.
  • It’s a simple component directive, with an isolated scope, binding, and a controller.

News, repos, tips & trends from the Facile.it Engineering team!

@FacileIt_Engr: Just published a new article about @angularjs #components by our @simfin76

With version 1.5 and newer, Angular (formerly known as AngularJS, but apparently now it’s just Angular) introduced their own interpretation of Web Components, back-porting Components from Angular 2.

Using Components with Angular today not only means writing code much more easily upgradeable to future framework versions (especially using ES6), but it also allows you to modularize and reuse code more easily, in line with the modern frontend programming style that will be more and more modular.

But, as with anything new, there are open questions:

According to the official documentation, a Component is like a Directive… but easier to use!

Directive:

Component:

It’s a simple component directive, with an isolated scope, binding, and a controller.

As you can see not much has changed, but things are a little simpler:

Components so don’t manipulate the DOM or data that are outside their scope, but they receive inputs and produce outputs through the interaction with the view. Another nice point is that we don’t need to write a dumb function that always returns the same object, we just define that object right here.

New other goodies:

binding:

, or change the existing one, this would be propagated to the child too, and vice-versa; this is how two-way data binding operates by design.

While helpful, this isn’t a very common scenario in my experience, because it has its drawbacks: mostly, in complex applications it may become more difficult to reason about, and it can have heavy performance implications.

That’s why Angular has introduced one-way data bindings: these create just a single watcher, watching for changes on the parent and propagating them to the child. As a result we gain performance (by cutting in half the amount of watchers created) and things become less “error friendly”.

The syntax is similar to the code below:

Other data binding parameters are:

Lifecycle hooks provides us with an easy way of invoking operation based on the lifecycle of our components. The usage of these hooks lets us provide our users with relevant information or action at the appropriate time.

This is a very simple example, but imagine we’d need to do some HTTP requests during initialization of this component or controller: now we have a better place for these kind of things.

Suppose that we make the name property of our myUserCmp configurable from the outside using a one-way binding:

in the markup we can now bind an expression to the component’s user property like this:

lifecycle hook. It gets called with an object that holds the changes of all one-way bindings along with the currentValue and the previousValue.

Adopting Components allows you to write code that is more easily portable to future Angular versions and introduces a modular architecture of the DOM that is more maintainable compared to the usual guidelines.

In a Component based architecture, an application becomes a tree structure of elements, with well-defined inputs and outputs, a clear data-flow, and predictable behaviours.

In this structure, the root elements are usually called “smart components” because these are the ones who manage the data, while those closest to the leaves are called “dumb components” instead, because they are more UI focused and are highly reusable.

is a great addition to Angular. It’s a real upgrade for code quality and helps you prepare for the future.

: you have unlocked a new skill!

For more details refer to understanding components docs

Angular Components: from AngularJS to “just Angular”

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.