Angular 4.2 was released three weeks back itself. The community aware of this release and upgraded in their many projects as well. But from my observation, the release specific features are still not used in most of the projects. Even though this release is not a major one there are many useful features to the Angular community. This release is mainly concentrated on Animation package if you look at the official change log.

The main features of Angular 4.2 release are

Generic features:

The Angular form inputs support validators such as min and max attributes
The ApplicationRef bootstrap method allows bootstrapping the component directly
Enhance i18n tooling such as MissingTranslationStrategy and location notes in translation files.
The first step on AOT component’s testing approach
Introduce flag to always compile the generated code.

Animation Features:

Animation options and input params
The animation() function for reusable animations
Query for inner elements within animations
Staggering multiple elements
Enabled queried elements
Routable animations
Programmatic animations using AnimationBuilder

Let’s dive into them one by one. First we will start with generic features in a quick tour.

Generic Features:

The general feature include form validations, bootstrap a component explicitly, improving i18n tools, AOT support, checks for compilation and testing feature improvements.

Form validations:

The form components provided support for min and max properties along with other possible validations. For example, the input element with min and max validations would be as follows,

<input type="number" [(ngModel)]="user.age" min="0" max="130">

This feature is removed in later release (4.2.3) due to breaking changes. It may be ported back in next major releases.

Bootstrap component:

You can bootstrap Angular components directly by passing the element reference to the bootstrap method of ApplicationRef class. Please refer the API documentation for more details https://angular.io/api/core/ApplicationRef#bootstrap

Improvements to i18n tools:

If you are going to support internationalization and forgot to provide a translation, then the build will succeed with a warning that you might face issue with translations. You can configure the Angular compiler for different possibilities of “missing translation” behaviors:

Error
Warning (default)
Ignore

For example, the error configuration for JIT compile would be as follows

{ provide: CompilerConfig, useValue: new CompilerConfig({ missingTranslation: MissingTranslationStrategy.Error }) }

Please find the reference link for more details.

Compiler options:

The compiler options can be controlled by the flag alwaysCompileGeneratedCode and will be turned on by default in the future releases.

Animation Features:

The animation feature is available from Angular 2.0 release itself. The animation features moved to their separate package in Angular 4.0. The latest Angular 4.2 version introduces new and interesting animation features that can be used for animations with input parameters, multiple elements, reusable animations and router-level animations.

Animation options and input params:

Angular 4.2 provides the way to configure or override options for each of the step-based animation methods. The examples for step-based animation methods such as trigger, transition, query, sequence and group available under animation package.

The animation options include delay and input parameters. Let us take an example of state transition animation with input parameters as below

transition('* => *', 
       [ style({ opacity: 0 }),animate("{{ time }}", 
         style({ opacity: "{{ opacity }}" }), ],
         { time: "1s", 
           opacity: "1" })

Both time and opacity inputs will be replaced in the runtime.

Reusable animations:

The animations with input params is really a great feature but it can’t be reused across the components. If you can define the animations in an external files then it is easy to reuse. This can be achieved using animation() and useAnimation() API calls. Let us take a fade animation with input parameters in a separate fie as below.

import {animation, style, animate} from "@angular/animations";
export var fadeAnimation = animation([ style({ opacity: "{{ from }}" }), animate("{{ time }}",
                            style({ opacity: "{{ to }}" })) ], { time: "1s" })

Now the fadeAnimation can reused by importing in your component class,

import {useAnimation, transition} from "@angular/animations";
import {fadeAnimation} from "./animations";
transition('* => *', [ useAnimation(fadeAnimation, { from: 0, to: 1, time: '1s' }) ])

This features make the input params configuration much powerful.

Handling inner elements and multiple elements :

As we know that, the DOM structure has tree hierarchical format. There is a need to control the entire tree of elements animations. The query feature allows you to style elements in different ways as below

import {query, style, animate} from "@angular/animations";
// apply some styling to all inner elements
query('*', style({ opacity: 0 }))

// Get all the elements to style
query('div, .inner, #id', [
  animate(1000, style({ opacity: 1 }))
])

// Reset the state of each element
query('*', [
  animate(1000, style('*'))
])

The query supports CSS selectors as well to get bunch of elements. Where stagger feature make sure that there will be some space between each step-based animation. For example, the below stagger allows 100ms time gap with an animation style

query(':enter',
       stagger('100ms', [ animate('1s', style({ opacity: 1 })) ])

Control child animations:

If you provide animations for both parent and child elements then parent element might override the child animation. Otherwise both might animate at the same time. The animateChild() API call give more control to the parent node which decides when child needs to animate.

trigger('parent', [ style({ transform: 'translate(-100px)' }),
        animate('500ms', style({ transform: 'translate(0px)' })),
        query('@child', animateChild()) ]),
trigger('child', [ style({ opacity:0 }), animate('0.5s', style({ opacity:1 })) ])

The child animation is called based on parent explicit call using animateChild().

Router Animations:

We observed that query’s useAnimation methods are designed to create inner animations at a convenient time with in a sequence. It is also good idea to create animations while navigating pages from one view to the other (i.e, While entering or leaving the page).

You can define the animations in routes configuration as below

<!--routes.ts-->
const ROUTES = [ { path: '', component: HomeComponent, data: { animation: 'homePage' } },
                 { path: 'training', component: TraningPageComponent, data: { animation: 'trainingPage' } } ]

The component class has to define the animation for different states

<!-- component.ts -->
trigger('routeAnimation',
         [ // no need to animate anything on load
       transition(':enter', []),
           // when we go away from the home page to training
       transition('homePage => trainingPage', [ // ... ]),
          // and when we go back home
       transition('trainingPage => homePage', [ // ... ]) ])
class AppComponent{ 
     prepRouteState(outlet: any) { 
      return outlet.activatedRouteData['animation']
 } }

The template file needs to define the animation like any other animations

<!– component.html –>

<div [@routeAnimation]="prepRouteState(routerOutlet)">
<router-outlet #routerOutlet="outlet"></div>

Animation Builder:

The programmatic way of creating animations has more control the declarative approach of animations. The AnimationBuilder() API plays a significant role with more control by defining animations and play them in an order.

import {AnimationBuilder} from "@angular/animations";
@Component({...})
class AppComponent {
  constructor(public builder: AnimationBuilder) {}
   animate() {
    const factory = this.builder.build([
       // the animation goes here
    ]);    
    // create the animation
    const player = factory.create(this.someElement);   
    // start it off
    player.play();
  }
}

Conclusion:

This release brings various generic features in different areas. But majorly it focused on animation features. We can say that this is an improved version for animation packages. As per semantic versioning Angular 4.3 need to released in few more days. I will post Angular 4.3 features in detail very soon. Cheers Geekos 🙂

Angular 4.2 release: General and Animation features