Angular 6 New Features

Angular 6 is focused less on underlying framework and more on the toolchain and indicateing new easier moving features in future versions.

Angular 6 is not having more breaking changes

synchronized major version number for

•  angular framework   version 6.0.0
•  angular CLI
• angular Material +CDK

Animations

Animations separated from angular core, earlier importing from -> Import from @angular/core

For animation separate package introduced and now will be imported from-> Import from @angular/animations

• No more support for <template and repaced with <ng-template>.

• Earlier services were registering with providers array at component level, now services can be registered

at service itself with providedIn property at service level.
Eg:-
@Injectable({
providedIn:'roor',
})

export class ServiceClass{}

-> ngModelChange event is introduced.

Angular CLI

ng update <package> : automatically updates

ng add : add new things to angular app, ex: angular material

CLI  Material starter templates introduced

Material Sidenav
ng generate @angular/material:material-nav --name=my-navigation

Dashboard
ng generate @angular/material:material-dashboard --name=My-dashBoard

Datatable

ng generate @angular/material:material-table--name=My-table

• Angular Elements has been introduced

• Ivy has been introduced , but will come in new versions.

Read more >>

New Features In Angular 5

Certain tools are optimized in the new version of Angular 5

    Angular 5 supports Typescript version 2.4.

    Angular 5 supports RxJS 5.5 which has new features like Pipeable Operators.

    A build tool to make the js bundles (files) lighter.

    Ahead of Time (AOT) is updated to be on by default.

    Events like ActivationStart and ActivationEnd are introduced in Router.

Read more >>

Angular 7 New Features

Angular 7 new features

CLI Prompts:-

Angular is continuously increasing new features focusing on new tools and improvements.

While creating apps through CLI its asks for ? Would you like to add Angular routing? (y/N) like below.

Next when click Y it will add routing to the project.

Next asks for ? Which stylesheet format would you like to use? (Use arrow keys) here we can select the list of style sheet format we need to use by using arrow keys up and down. If you don’t want to select none of them just press Enter, It will generate the application.

CLI prompts are customizable! Add we can add a schematic. json using the Schematic CLI and you can tell the Angular CLI which prompts to execute!

Any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection.

"routing": {

  "type": "boolean",

  "description": "Generates a routing module.",

  "default": false,

  "x-prompt": "Would you like to add Angular routing?"

},

Application Performance

Earlier developers were including reflect metadata in polypill production, Actually this is needed only in Development.

In Order to fix this in new angular v7 will automatically remove this from your polyfills.ts file. It will add in at the time of application build in Jit Mode and removes from production builds by defaults.

New applications will warn when the initial bundle is more than 2MB and it will throw error at 5MB. These budgets can be easy to change in angular.json.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]


Angular Material & the CDK

Angular material in angular 7 updated and can show visual effect updated. They have added Virtual Scrolling and Drag and Drop by importing the DragDropModule and ScrollingModule.

Dependency Updates In Angular 7

TypeScript 3.1 support

RxJS 6.3 is added

 Added Support for Node v10

Angular Elements with Slot

Angular 6 enabled the feature of ViewEncapsulation.ShadowDom, which support angular elements support content projection using web standards for custom elements.

New standard HTML element introduced by Web Component Specification is slot. This enables components with a template.

@Component({

  selector: 'sd-card',

  template: `

    <header>

      <slot name="card-header"></slot>

    </header>

    <slot></slot>`,

  encapsulation: ViewEncapsulation.ShadowDom,

  styles: []

})

export class CardComponent {

}

That can later be used as an Angular Element like this:

<sd-card>

  <span slot="card-header">My crad Header</span>

  <p>My Card info...</p>

</sd-card>

New ng-compiler

New Ng-compiler provided eight-phase compilation and reduced a large app size around 2 times. Advanced New Compiler is capable of 8-phase rotating AOT compilation.

Application can reduce a massive reduction of 95-99% in bundle size.

Router Updates

Router has been updated and will give new warnings if you try to trigger a navigation outside of the Angular zone and it won't work.

Deprecations

Its quite common in major releases, few things have been deprecated. <ngForm> is deprecated and replaced with <ng-form>

Read more >>