Angular — New features in Angular 2.1

A review of new features included in Angular 2.1

The Petri Dish Project — the Bio-Infinity series (4), by J.D Doria, 2015

In this post we are going to look into some new features in Angular 2.1. This is a minor upgrade.

Let’s explore some of these features:

  • New animation aliases
  • Lazy load modules preloader

As previous versions, it is very easy to upgrade, and a list of breaking changes can be found on the Angular blog to guide you in the process.

Find the latest Angular content at my feed at @gerardsans.

Also don’t forget to check this blog post covering Angular 2.3 release.

New animation aliases

This is a feature adding :enter and :leave aliases to use in animation transitions. As an example, let’s use this toggle animation definition below.

animations: [
trigger('toggle', [
state('show', style({ opacity: 1; })),
state('void', style({ opacity: 0; })),
transition('void => *', animate('500ms ease-in-out')),
transition('* => void', animate('500ms ease-in-out'))
])
],

* is a special state matching any state. void is also a special state represented by an element not currently rendered in the view.

In Angular 2.1 we can refactor the previous code using the new aliases and making the code more easy to follow.

animations: [
trigger('toggle', [
state('show', style({ opacity: 1; })),
state('void', style({ opacity: 0; })),
transition(':enter', animate('500ms ease-in-out')),
transition(':leave', animate('500ms ease-in-out'))
])
],

A demo of this code can be found here.

You can read this awesome blog post introducing animations in Angular below.

Lazy load modules preloader

Angular introduced lazy loading so we could easily decide which modules in our application could be loaded on-demand.

Lazy loading is a really powerful feature but loading large modules on-demand can take some time to load which doesn’t make for a great user experience.

In Angular 2.1 using the router preloader we can improve the default lazy loading setup by preloading lazy load modules in the background without interrupting the user. Once the user finally decides to navigate to a lazy load module, the navigation will be instant.

In order to opt-in to this feature we need to add a flag to our Root Route definitions.

@NgModule({  
bootstrap: [App],
imports: [
RouterModule.forRoot(ROUTES, {
preloadingStrategy: PreloadAllModules
})
]
}) class AppModule {}

In the example above we are using PreloadAllModules strategy, which will preload all defined lazy load modules. We can also use a custom preload strategy if we want more control.

For a more detailed overview read this great blog post from Victor Savkin.

This addition definitely improves lazy load user experience.

That’s all! Think I missed some features? Contact me on @gerardsans or gerard.sans_at_gmail.com. Thanks for reading!

--

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gerard Sans

Gerard Sans

Helping Devs to succeed #AI #web3 / ex @AWSCloud / Just be AWSome / MC Speaker Trainer Community Leader @web3_london / @ReactEurope @ReactiveConf @ngcruise

More from Medium

How to Deploy and Host Angular 🅰️ Micro Frontend for FREE Using Firebase 🔥

How to Add Sentry to your Angular project with Graphql

How to fix logging for proxy in angular

Code quality: pre-commit linting