I’ve been using AngularJS 1.x.x for a while (more than 2 years) and I’m very familiarized with it, but recently I tried Angular 4 for some side projects. I like it.

Since the first moment I felt the difference between the version I was used to use and the new one. Typescript, ES6, the ng cli and some new features introduced in the framework make a great combo for development, and I wanted to talk about it.

So, for me, these are 3 things I like the most of Angular 4 (so far).

Lifecycle hooks

The first time I heard about these hooks, I though in React. The thing is that Angular 4 is based on components, and every component has a set of hooks; this is, basically, functions that are called before certain things happen in the internal engine of the framework.

Well, these hooks are super useful when you are writing a component in Angular 4. You can use them, in example, to initialize elements, timeouts or intervals inside your component, to validate some properties inside the component depending on inputs from the parent (data binding) or to terminate intervals or timeouts before the component is disposed.

You can find a lot of information about lifecycle hooks in the official documentation about this topic. Just keep in mind that some things can be done in a specific hook, but can’t be done in another just because of execution order in the engine.

If you want to know more about this, please write in the coments below and I’ll make a post for it.

Routing

Aaah… ngRoute and ui-router, my old friends. Most of the time working with Angular 1.x.x I tried to don’t use a big template with an even bigger controller, so I always used a module for routing.

My surprise was that Angular 4 has a routing feature included! And, to be honest, is good enough (don’t misunderstand me, to be good enough is very hard these days) and very easy to understand.

The reality is that have a core-included feature for routing, well documented and easy to understand/use is basically a jewel talking about Angular. Things that I like about routing:

  • Router events
  • Debugging mode
  • Router state

If you want to know more about routing, please visit this link or write a comment below and I’ll take care of your questions.

Data binding and component interaction

Last but not least, data binding. One of the things more hated about Angular 1.x.x was the two ways data binding. To be honest, I think the hate comes from people who was abusing of the binding, but that’s not the idea for this point.

In Angular 4, the control that we have for data binding is much better. We can define what to use in a children component and what to export to the parent. But this is well known for all of us. What I really like in this topic is the interaction between components and the way it plays with data binding.

Features that I like:

  • Intercept property changes and transform them with a setter,
  • Use lifecycle hooks for input changes,
  • EventEmitters for parents listening to children events and
  • @ViewChild

With these features or protocols, now the communication and data binding can be perfectly controlled by the developer (but you still could abuse of it).

For more information about data binding and components interaction please read this link or ask in the comments.

Angular 4 is a fresh new world for people who is used to work with frameworks like Angular 1.x.x What do I recommend to start working with it?

If you want to know more about Angular 4, have questions or want to share something, don’t forget to write it in the comments below. Also, remember that you can find our Confluence add-ons in the Atlassian marketplace, try them out for free in your confluence instance!

See you next time!