python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 2 Modules vs. Angular 1 Module vs. JavaScript Modules

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

Off-course! Angular 7 being smaller, faster and easier to use and it will making developers life easier.

Recently 6.0.0-rc.3 is released and Angular 7 showing up in Sep/Oct 2018 That’s good news for Angular lovers.

Each Angular version is expected to be backward compatible with the prior release. Google pledged to do twice-a-year upgrades.

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';


And

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';

yourObservable.map(data => data * 2)
.throttle(...)
.subscribe(...);


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

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


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>
</template>


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>
</ng-template>


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
//my.service.ts
export class MyService { }

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

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

Use with Angular 6 released-
//my.service.ts
@Injectable({providedIn: 'root'})
export class MyService { }

@NgModule({
  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) {}
myFormFormGroup;

ngOnInit() {
  this.myForm = this.fb.group({
      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)">


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

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

And
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!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions