Angular 4.2
The Angular team continues to publish new versions of Angular according to the Semantic versioning. Angular version 4 was released on March 16, six months’ later version 2 was released. In the last three months two minor versions and a lot of patch versions were born with new stuff. Angular 4.2 is already here and we have a huge number of new features added for making animations easier and powerful. Part of them are defining the reusable animations, querying for inner elements, animating when routes change and building/controlling an animation using AnimationBuilder. So, let’s dive deep-in and know about the new features in Angular 4.2.
WHAT’S NEW?
- Angular Forms now includes validators for min and max attributes.
- Developer can now bootstrap a component directly by passing an element reference to the bootstrap method of an ApplicationRef.
- Enhanced i18n tooling including MissingTranslationStrategy and location notes in xliff2 files.
- New compiler flag alwaysCompileGeneratedCode is available in opt-in, and will be turned on by default in the future.
NEW FEATURES IN ANGULAR 4.2
Forms
Two new validators joins the existing requirement, minLength, maxLength, email, and pattern. Min and Max helps the developer to validate whether the input is at least or at most the value specified or not.
<input type=”number” [(ngModel)]=”user.age” min=”0″ max=”130″>
Update (2017-06-17): The min and max validators have been temporarily removed from Angular in version 4.2.3, as they are a breaking change. They’ll return in a major version, maybe 5.0.0.
Angular Animations
There are huge number of new features to make working with Animations easier and more powerful. Some of the new feature are:
- Configure options and set input variables within animations.
- Define reusable animations using animation().
- Stagger multiple elements within an animation using stagger().
- Enable queried elements to trigger their own animations.
- Orchestrate a full-blown animation when routes change.
- Programmatically build/control an animation using AnimationBuilder
A new query function has been introduced in the animation DSL, allowing to query the elements in the template. It uses querySelectorAll behind the scene, so the developer can use an element or a class as parameter. It also supports pseudo-selectors, and that opens a few interesting possibilities!
For example, you can now easily animate elements in a NgFor:
<div [@races]=”races?.length”>
<button class=”btn btn-primary mb-2″ (click)=”toggle()”>Toggle</button>
<div *ngFor=”let race of races | slice:0:4″>
<h2>{{race.name}}</h2>
<p>{{race.startInstant}}</p>
</div>
</div>
WITH THE FOLLOWING ANIMATION
trigger(‘races’, [
transition(‘* => *’, [
query(‘:leave’, [
animate(1000, style({ opacity: 0 }))
], { optional: true }),
query(‘:enter’, [
style({ opacity: 0 }),
animate(1000, style({ opacity: 1 }))
], { optional: true })
])
])
Now, every time an element is removed from the races array, it will slowly fade out. And when an element enters, it will slowly fade’s in.
Animation has also been added to build reusable animations. The syntax allows to have dynamic parameters with default values. The developer need to use a reusable animation, they can call useAnimation, and override the default parameters if they want to.
FINAL WORD
That’s all for this release! The focus was mainly on animations and tests, and the team is also working on reducing the bundle size of the applications, with the help of the Google Closure Compiler. We think we are going to learn more about that very soon!