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

Image for post
Image for post
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!

Image for post
Image for post
Image for post
Image for post

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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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