Angular 6 release is just around the corner which will be the major update from version 5. So we are highlighting some of its new features announced by the Angular Team. In 2017, Angular, one of the most popular JavaScript framework for building mobile and desktop applications, Released two major upgrades in 14 months. It reached the next milestone with Angular 5 arrival on November 1, 2017. The Angular 5.0 upgrade itself centered on making the framework faster, smaller, and easier to use.
Angular 6 being smaller, faster and easier to use and it will making developers life easier. Recently Angular 6.0.0-beta.7 is released and production release on end of March 2018.
The Angular
Team are
working on lots of bug fixes, new features and added/update/remove/
re-introduce/ and may more things.
Let’s see the about Angular 6 in details -
- Typescript 2.7+ supports
- Added Angular Material and CDK Stable
- Component Dev Kit (CDK) - CDK allows you to build your own library of UI components using Angular Material.
- Improved decorator error messages
- Fix platform-detection example for Universal
- Ivy Renderer - It is a new backward compatible and main focused area - speed improvements, size reduction, and increased flexibility.
- Add afterContentInit and afterContentChecked to render
- Added to supports of nativeElement
- Added Optional generic type for ElementRef
Example -
@ViewChild('your-element') yourElement:ElementRef;
- Bazel Compiler - Bazel only rebuilds what is necessary.
- Added Test Comment and add missing lifecycle tests for projected components
- Closure Compiler - Closure Compiler consistently generates smaller bundles.
- Rename QueryPredicate to LQuery and LQuery to LQueries
- Service Worker - Service worker is a script that runs in the web browser. It also manages caching for an application.
- Added multiple validators for array method of FormBuilder
Example -
import { Component } from '@angular/core';
import {FormsModule, FormBuilder, FormGroup} from '@angular/forms';
constructor(private fb: FormBuilder) {}
myForm: FormGroup;
ngOnInit() {
this.myForm = this.fb.group({
text: ['', Validators.required],
options: this.fb.array([],
[MyValidators.minCount, MyValidators.maxCount])
});
}
- Handle string with and without line boundary - Now Handle string with and without line boundary (^ & $) on pattern validators. Previously, it works with string not boundaries.
- AbstractControl statusChanges - Previous version, not emits an event when you called “markAsPending” but now emits an event of "PENDING" when we call AbstractControl markAsPending.
- Updates on NgModelChange - Now emitted after value and validity is updated on its control. Previously, it was emitted before updated.
Previously it looks like -
<input [(ngModel)]="name" (ngModelChange)="onChange($event)">
And
onChange(value) {
console.log(value); // would log the
updated value, not old value
}
Now, its looks like -
<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">
And
onChange(NgModel: NgModel) {
console.log(NgModel.value);// would log old value, not
updated value
}
- Allow HttpInterceptors to inject HttpClient
- Add navigationSource and restoredState to NavigationStart
- Add type and hooks to directive def
- Enable size tracking of a minimal CLI render3 application and add canonical view query
- Language Service – The 2.6 version of Typescript’s “resolveModuleName” started to require paths passed to be separated by '/' instead of being able to handle '\'.
Where to download the Angular 6 beta -
What's New In Angular 5? What Are the Improvements In Angular 5?
Angular
5 is going to be a much better angular and you will be able to take advantage
of it much easier and it contains bunch of new features, performance
improvements and lot of bug fixes and also some surprises to Angular lovers.
Included Key Features - Angular 5
- Include Representation of Placeholders to xliff and xmb in the compiler
- Include an Options Arg to Abstract Controls in the forms controls
- Include add default updateOn values for groups and arrays to form controls
- Include updateOn blur option to form controls
- Include updateOn submit option to form controls
- Include an Events Tracking Activation of Individual Routes
- Include NgTemplateOutlet API as stable in the common controls
- Create StaticInjector which does not depend on Reflect polyfill
- Include [@.disabled] attribute to disable animation children in the animations
- Make AOT the default
- Watch mode
- Type checking in templates
- More flexible metadata
- Remove *.ngfactory.ts files
- Better error messages
- Smooth upgrades
- Tree-Shakeable components
- Hybrid Upgrade Application
Included Performance Improvements - Angular 5
- Use of addEventListener for the faster rendering and it is the core functionality.
- Update to new version of build-optimizer.
- Include some Improvements on the abstract class methods and interfaces
- Remove decorator DSL which depends on Reflect for Improve the Performance of Apps and This is the core functionality.
- Include an option to remove blank text nodes from compiled templates
- Switch Angular to use Static-Injector instead of Reflective-Injector.
- Improve the applications testing.
- Improve the performance of hybrid applications
- Improvements on Lazy loading for Angular
Improvement on HttpClient – Included
- Improvement on Type-checking the response
- Improvement on Reading the full response
- Improvement on Error handling and fetching error details
- Improvement on Intercepting all requests or responses
- Improvement on Logging
- Improvement on Caching
- Improvement on XSRF Protection
Added new router life cycle events for Guards and Resolvers -
- GuardsCheckStart,
- GuardsCheckEnd,
- ResolveStart and
- ResolveEnd
0 comments:
Post a Comment