Skip to main content

Angular 8 vs Angular 7 vs Angular 6 - What's New In Angular 6, 7, 8 Features?

What’s New In Angular 8?
Angular 8 being smaller, faster and easier to use and it will making Angular developers life easier. Angular version numbers have three parts: major.minor.patch

This release contains the following added and Improvements over the entire Angular platform including:-

=> Added Support for TypeScript 3.2
=> Added a Navigation Type Available during Navigation in the Router
=> Added pathParamsOrQueryParamsChange mode for runGuardsAndResolvers in the Router
=> Allow passing state to routerLink Directives in the Router
=> Allow passing state to NavigationExtras in the Router
=> Restore whole object when navigating back to a page managed by Angular Router
=> Added support for SASS
=> Resolve generated Sass/Less files to .css inputs

=> Added Predicate function mode for runGuardsAndResolvers:-
This option means guards and resolvers will ignore changes when a provided predicate function returns `false`. This supports use cases where an application needs to ignore some param updates but not others.

For example, changing a sort param in the URL might need to be ignored, whereas changing the `project` param might require re-run of guards and resolvers.

=> Added functionality to mark a control and its descendant controls as touched: - add markAllAsTouched () to AbstractControl

=> Added ng-new command that builds the project with Bazel
=> Use image based cache for windows BuildKite
=> Export NumberValueAccessor & RangeValueAccessor directives

=> Use shared DomElementSchemaRegistry instance for improve performance of platform-server(@angular/platform-server):-
Right now the ServerRendererFactory2` creates a new instance of the `DomElementSchemaRegistry` for each and every request, which is quite costly (for the Tour of Heroes SSR example this takes around **15%** of the overall execution time)

=> Now the Performance Improvements on core, more consistent about “typeof checks”: -
When testing whether `value` is an object, use the ideal sequence of strictly not equal to `null` followed by `typeof value === 'object'` consistently. Specifically there's no point in using double equal with `null` since `undefined` is ruled out by the `typeof` check.

Also avoid the unnecessary ToBoolean check on `value.ngOnDestroy` in `hasOnDestroy()`, since the `typeof value.ngOnDestroy === 'function'` will only let closures pass and all closures are truish (with the notable exception of `document.all`, but that shouldn't be relevant for the `ngOnDestroy` hook)

=> In the Compiler-CLI, expose ngtsc as a TscPlugin

=> Restore whole object when navigating back to a page managed by Angular Router:-
This feature adds a few capabilities. First, when a `popstate` event fires the value of `history.state` will be read and passed into `NavigationStart`. In the past, only the `navigationId` would be passed here.
Additionally, `NavigationExtras` has a new public API called `state` which is any object that will be stored as a value in `history.state` on navigation.

For example, the object `{foo: 'bar'}` will be written to `history.state` here: -`router.navigateByUrl('/simple', {state: {foo: 'bar'}});`

What’s New In Angular 7?

Angular 7 being smaller, faster and easier to use and it will making developers life easier.  Now Angular 7 is released! This is a major release and expanding to the entire platform including-
1.      Core framework,
2.      Angular Material,
3.      CLI
Many  of new things are added in Angular 7 and also many of us will curious to know these new features and bug fixes.

Let’s introduce added and modified new features of Angular 7 -
1.      Added a new interface - UrlSegment[] to CanLoad interface
2.      Added a new interface -  DoBootstrap interface
3.      Angular 7 added a new compiler - Compatibility Compiler (ngcc)
4.      Introduce a new Pipe called - KeyValuePipe
5.      Angular 7 now supporting to TypeScript 2.9.
6.      Added a new elements features - enable Shadow DOM v1 and slots
7.      Added a new router features - warn if navigation triggered outside Angular zone
8.      Added a new mappings for ngfactory  and ngsummary files to their module names in AOT summary resolver.
9.      Added a new "original" placeholder value on extracted XMB
10. Added a new ability to recover from malformed URLs
11. Added a new compiler support dot (.) in import statements and also avoid a crash in ngc-wrapped
12. Update compiler to flatten nested template fns

How to update to Angular 7?
For updating Angular 6 to Angular 7, you should use a command -

ng update @angular/cli @angular/core

For more detail click on link -

Explore in detail - What's New In Angular 7? Let’s Introduce Angular 7 New Features! 

Angular Future Releases 
DateStable ReleaseCompatibility*
September/October 20187.0.0^6.0.0
March/April 20198.0.0^7.0.0

Angular 6 frameworks is now feature complete, the CLI and Material/CDK parts of the v6 release and other integrations are still in works and It will be completed by the time.

Angular Team are working on lots of bug fixes, new features and added/update/remove/ re-introduce/ and may more things.

Let’s start to explore all changes of Angular 6 step by step!

Added ng update - This CLI commands will update your angular project dependencies to their latest versions. The ng update is normal package manager tools to identify and update other dependencies.

ng update

Angular 6 uses RxJS 6 - this is the third-party library (RxJS) and introduces two important changes as compared to RxJS 5.
1.      RxJS 6 introduces a new internal package structure
2.      Operator concept

Both are requires you to update your existing code

To update to RxJS 6, you simply run -
npm install --save rxjs@6

Simply run the blow command and update your existing Angular project-
npm install --save rxjs-compat

Alternatively, you can use the command - ng update rxjs to update RxJS and install the rxjs-compat package automatically.

RxJS 6 Related import paths -
Instead of -
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

Use a single import -
import { ObservableSubject } from 'rxjs';

So all from rxjs/Something imports become from one 'rxjs'

Operator imports have to change -
Instead of
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/throttle';

Now you can use -
import { mapthrottle } from 'rxjs/operators';


Instead of
import 'rxjs/add/observable/of';

Now you can use -
import { of } from 'rxjs';

RxJS 6 Changes - Changed Operator Usage

Instead of-
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/throttle'; => data * 2)

You can use the new pipe () method,
import { mapthrottle } from 'rxjs/operators';

  .pipe(map(data => data * 2), throttle(...))

CLI update and added a new project config file - Instead of “.angular-cli.json” using “angular.json”
Now in Angular 6 new projects use an “angular.json” file instead of “.angular-cli.json” file.

ng update @angular/cli --from=1 --migrate-only

The above command helps you to update your existing “.angular-cli.json” file to the new “angular.json” file.

The “angular.json” file contains the Properties -
1.      Version - This is integer file format version and it is currently 1.
2.      newProjectRoot - This is string path where new projects will be created.
3.      defaultProject - This is default project name used in commands.
4.      CLI - This is workspace configuration options for Angular CLI and it contains
a.      defaultCollection
b.      packageManager
c.       warnings
d.      And so on.
5.      Schematics - This is configuration options for Schematics.
6.      Projects - This is configuration options for each project in the workspace and it contains
a.      root
b.      sourceRoot
c.       projectType
d.      prefix
e.      schematics
f.        Architect - This is the project configuration for Architect targets.

The <template> deprecated, Now Angular 6 introduce <ng-template> –
Now in Angular 6, you should use <ng-template> instead of <template>

For example, previously you are using
<template [ngIf]="IsAdmin">
  <p>This template renders only if IsAdmin is true.</p>

Now in Angular 6, you should use <ng-template> instead of <template>
<ng-template [ngIf]="IsAdmin">
  <p>This template renders only if IsAdmin is true.</p>

Service level changes (the way of marking a service as global) -
In the earlier versions, if you want to provide a service to the entire application –you should add it to providers [] in the AppModule but in the Angular 6 released you should not add in the providers [] in the AppModule.

Example for marking a service as global -

Instead of
export class MyService { }

//In app.module.ts
//JavaScript imports services
import { MyService } from './my-serice.service';

//AppModule class with the @NgModule decorator
  declarations: [],
  providers: [MyService//My services instances are now available across the entire app.
export class AppModule {
   //exporting app module

Use with Angular 6 released-
@Injectable({providedIn: 'root'})
export class MyService { }

  declarations: [],
  providers: [] // Service does not need to be added here
export class AppModule {}

The second one obviously saves you some lines of code as compare to previous code.

Angular 6 introduces Angular Elements -
The elements are a feature that allows you to compile Angular components to native web components which you can use in your Angular application.

An angular element is a package which is part of the Angular framework @angular/elements.

For more detail kindly refer the click to Angular Elements

Angular 6 introduces new Ivy Renderer -
The new Ivy renders and it’s not stable for now and it’s only in beta version. It will stable in future for production.

Ivy Renderer is new rendering engine which is designed to be backward compatible with existing render and focused to improve the speed of rendering and it optimizes the size of the final package. 

The main goal of Ivy render is to speed up its loading time and reduce the bundle size of your applications. Also for uses a different approach for rendering Angular components.

For Angular, this will not be default renderer, but you can manually enable it in compiler options. 

Bazel Compiler -
The Bazel Complier is a build system used for nearly all software built at Google.

From Angular 6 release, will start having the Bazel compiler support and when you compile the code with Bazel Compiler, you will recompile entire code base, but it compiles only with necessary code.

The Bazel Complier uses advanced local and distributed caching, optimized dependency analysis and parallel execution.

For more detail kindly refer the Angular 6

Replace Context, Record and Injectors -
Replace ngOutletContext with ngTemplateOutletContext
Replace CollectionChangeRecord with IterableChangeRecord
Now use Renderer2, Instead of Renderer
Now use StaticInjector, Instead of ReflectiveInjector,

Angular 6 Renamed Operators -
The lists of renamed operators are –
1.      do() => tap()
2.      catch() => catchError()
3.      finally() => finalize()
4.      switch() => switchAll()
5.      throw() => throwError()
6.      fromPromise() => from()

Angular 6 introduces multiple validators for array method of FormBuilder 
import { Component } from '@angular/core';
import {FormsModuleFormBuilderFormGroupfrom '@angular/forms';

constructor(private fbFormBuilder) {}

ngOnInit() {
  this.myForm ={
      text: [''Validators.required],
      options: this.fb.array([], [MyValidators.minCountMyValidators.maxCount])

Updates on NgModelChange - Now emitted after value and validity is updated on its control. Previously, it was emitted before updated.

Previously  -
<input [(ngModel)]="name" (ngModelChange)="onChange($event)">

onChange(value) {
  console.log(value);   // would log the updated value, not old value

Now Use -
<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">

onChange(NgModelNgModel) {
  console.log(NgModel.value);// would log old value, not updated value

I hope you are enjoying with this post! Please share with you friends. Thank you so much!
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from   'react' ; import   './App.css' ; //Including all libraries, for access to extra methods. var   CryptoJS  =  require ( "crypto-js" ); function   App () {    var   data

.NET Core MVC Interview Questions and Answers

» OOPs Interview Questions Object Oriented Programming (OOP) is a technique to think a real-world in terms of objects. This is essentially a design philosophy that uses a different set of programming languages such as C#... Posted In .NET » .Net Constructor Interview Questions A class constructor is a special member function of a class that is executed whenever we create new objects of that class. When a class or struct is created, its constructor is called. A constructor has exactly the same name as that of class and it does not have any return type… Posted In .NET » .NET Delegates Interview Questions Delegates are used to define callback methods and implement event handling, and they are declared using the "delegate" keyword. A delegate in C# is similar to function pointers of C++, but C# delegates are type safe… Posted In .NET » ASP.Net C# Interview Questions C# was developed by Microsoft and is used in essentially all of their products. It is mainly used for