Angular — New features in Angular 2.1

Gerard Sans
Oct 16, 2016 · 3 min read

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!

Google Developers Experts

Experts on various Google products talking tech.

Gerard Sans

Written by

Developer Advocate @AWSCloud | Just be AWSome | MC Speaker Trainer Community Leader | Views are my own | @fullstackcon @ReactiveConf @ngcruise @UphillConf UK ☂

Google Developers Experts

Experts on various Google products talking tech.

More From Medium

More from Google Developers Experts

More from Google Developers Experts

Exploring the Android App Bundle

More from Google Developers Experts

More from Google Developers Experts

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade