Angular 6 Features
Big News !!!
Angular 6 is officially released. It is released with Angular CLI 6 and Material 6. Angular v6 is the first release of Angular that unifies the Framework, Material and CLI.
Angular 6 is released with great features like Angular Elements, new Schematics, PWA, Angular CLI 6 and Material 6 (Refer this for more details).
Angular 6 Features (Final Release)
AnimationBuilder.element and params within transition matchers.formatNumber, formatPercent, formatCurrency, and formatDate used by the number, percent, currency and date pipes are now available for developers who want to use them outside of templates.id of an NgModule to be dynamically computed if needed.@angular/compilar-cli with @angular/cli runtime requirements.ElementRefexpressionChangedAfterItHasBeenCheckedError when called from checkBindingNoChanges, by taking the binding name from the bindingDef and making the value passed to the error be $bindingName: $valueFormBuilder.array method.Hammer.js not loaded.navigationSource and restoredState to NavigationStart eventFind detail information of angular 6 features in RC & Beta Release.
Angular 6 features with RC and Beta release.
Sixth RC version of Angular 6 – rc.5 is released on 14th April, 2018. before that Angular 6 rc.2, rc.3 & rc.4 were released with major bugfixes and minor feature.
Lets analyse the Angular 6 rc.2 to rc.5 versions.
Angular 6 – rc.5 is released with four bug fixes and two great features.
Bugs of compiler, compiler-cli, elements and service-worker package are fixed.
Two new great feature released in RC.5 are :
BrowserAnimationsModule or NoopAnimationsModule context at runtime.asset or data group to the specified index file. The rules for a request to be classified as a navigation request are as follows:mode must be navigation.text/html response.By default, a navigation request can have any URL except for:
__.While these rules are fine in many cases, sometimes it is desirable to configure different rules for the URLs of navigation requests (e.g. ignore specific URLs and pass them through to the server).
It is now possible to specify an optional navigationUrls list in ngsw-config.json, which contains URLs or simple globs (currently only recognizing !, * and **). Only requests whose URLs match any of the positive URLs/patterns and none of the negative ones (i.e. URLs/patterns starting with !) will be considered navigation requests (and handled accordingly by the ServiceWorker).
It is the fifth RC version of Angular 6 – is released on 12th April, 2018.
Angular 6 – rc.4 is released with seven bug fixes and one minor feature.
Angular 6 – rc.3 was released on 6th April, 2018 with two bug fixes in bazel and compiler-cli package.
No feature release in rc.3.
Angular 6 – rc.2 was released on 5th April, 2018 with seven bug fixes and one minor feature. As per the official schedule, rc.2 was the last RC version release.
Previous Post : Features of Angular 6 till angular 6 – rc.1 released.
Angular 6 – rc.1 released on 30th March, 2018. Find the features of angular 6 –rc.1 below,
Angular 6 – rc.1 is released with 19 bug fixes and two new features.
Some of the bugs of animations, bazel, common, compiler, core and service-worker package are resolved.
also two new features are released in angular 6 – rc.1
These features are not much important as per the developer’s point of view. But these can be beneficial for package building.
No breaking changes in angular 6 – rc.1.
Previous Post : Features of Angular 6 till angular 6 – rc.0 released.
Angular 6-rc.0 is released on 21st March, 2018,
before that one more beta version beta.8 of angular 6 is released. Angular 6 – beta.8 was not planned as per official schedule
Let’s one by one analyse the features and breaking changes of angular 6 –rc.0 and angular 6 –beta.8.
Angular 6 – beta.8 released with lot of new features, bug fixes and some breaking changes.
templateUrl and styleUrls property in all @Component decorators with inlined contents in template and styles properties.angularCompilerOptions { enableResourceInlining: true } the .js output of ngc will have no lazy-loaded templateUrl or styleUrls. Note that this requires that resources be available to load statically at compile-time.Users can now pass a timeout to whenStable(). If there are still macrotasks pending when the timeout occurs, the callback will receive a list of pending tasks (provided by the TaskTracking zone spec).
whenStable() also now accepts an optional callback to invoke whenever the state of pending macrotasks changes. If this callback returns true, whenStable() will cancel the pending done callback, allowing users more control over which macrotasks they wait for.
Rename @Injectable({scope -> providedIn}).
Instead of {providedIn: APP_ROOT_SCOPE}, accept {providedIn: 'root'}. Also, {providedIn: null} implies the injectable should not be added to any scope.
<template> tag was deprecated in Angular v4 to avoid collisions (i.e. when using Web Components).# tsconfig.json
{
# ...
"angularCompilerOptions": {
# ...
# This option is no more supported and will have no effect
"enableLegacyTemplate": [true|false]
}
}beta-.8 removes support for <template>. <ng-template> should be used instead.
@angular/core. All animation symbols must now be imported from @angular/animations.package.json need to be updated to provide tslib 1.9.0 or higher to resolve incompatible peerDependencies warning.Angular v6 framework is now feature complete, the cli and material/cdk parts of the v6 release and other integrations are still in works and will be completed by the time v6.0.0 is released.
Previous Post : Features of angular 6 till angular 6 – beta.7 released.
The beta versions for Angular 6 is on a roll. Recently Angular 6.0.0-beta.7 is released.
Angular 6 will be the backward compatible with the Angular 5. So it will be easy to upgrade angular 5 application to angular 6.
Angular beta versions are released with a lot of bug fixes, new features and breaking changes.
Ivy Renderer: Ivy is a new backward-compatible Angular renderer focused on further speed improvements, size reduction, and increased flexibility. The Angular Team promises that switching to Ivy rendered will be smooth. This important feature will reduce the code size and makes compilation faster.
Bazel Compiler: Since source code changes often happen in small increments, it doesn’t make sense to rebuild the entire application for every little change. Instead, we should only rebuild code that actually changed, and code that depends on the changes. Bazel only rebuilds what is necessary. With advanced local and distributed caching, optimized dependency analysis and parallel execution, you get fast and incremental builds. So we can assume that this would be the important feature of the incremental build.
Closure Compiler: Closure Compiler is the bundling optimizer used to create JavaScript artifacts for nearly all Google web applications. The Closure Compiler consistently generates smaller bundles and does a better job in dead code elimination compared to Webpack and Rollup bundlers.
Component Dev Kit (CDK): CDK is already included in an Angular Material library, which offers more than 30 UI components. CDK allow us to build our own library of UI components using Angular Material.
Service Worker: Service worker is a script that runs in the web browser and manages caching for an application. Service worker is included in angular 5. In angular 6 service worker comes with bug fixes and additional feature.
Important Angular 6 features with respect to the development purpose
<input [(ngModel)]="name" (ngModelChange)="onChange($event)">
onChange(value) {
console.log(value); // would log updated value
} However, if you had a handler for the ngModelChange event that checked the value through the control, you would get the old value rather than the updated value. e.g:
<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">
onChange(ngModel: NgModel) {
console.log(ngModel.value); // would log old value, not updated value
} Now the value and validity will be updated before the ngModelChange event is emitted, so the same setup will log the updated value.
onChange(ngModel: NgModel) {
console.log(ngModel.value); // will log updated value
} According to current documentation, we can set only one validator on FormArray field with FormBuilder.array method. Now you can add the multiple validators for array method as shown below :
For example:
questionForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.questionForm = this.formBuilder.group({
text: ['', Validators.required],
options: this.formBuilder.array([], [MyValidators.correctCount, MyValidators.totalCount])
});
}
@ViewChild('my-element') myElement:ElementRef; Find Angular History here : Angular Version History
Charts help us to visualize large amounts of data in an easy-to-understand and interactive way. …
Generating reports, invoices, blog content, documents, guidelines, forms, etc in PDF form is a common…
Web Page title, description, and other meta tags are very important for the Search Engine…
Google Analytics is a popular analytical tool for web and mobile applications from Google. It…
Chrome DevTools provides amazing features to debug source code, capture element state, update and test…
Angular Charts Series Articles Best Angular Chart Libraries How to use ngx-charts in angular application…