What’s New In Angular 5 and Angular 6

Speciality of Angular 5 :-

Angular 5 encompasses platform for a build optimizer, Simpler Progressive Web Applications, Angular Universal API and DOM and improvements related to Material Design.

Key attributes of Angular 5 :-

1. Build optimizer
2. Simpler Progressive Web Applications
3. Improved compiler and Typescript
4. CLI v1.5 will make Angular 5 Projects by default.
5. New HttpClient
   Example :-
   

   import { HttpClientModule } from '@angular/common/http';

6. Angular Universal API and DOM supported.
7. Improved Material Design.
8. Router Hooks
9. Number, Dates and Currency Pipe Updates.
10. Form Validation method change in Angular 5.
    Example :-
    

    <input name="Name" ngModel [ngModelOptions]="{updateOn: 'blur'}">
    <form [ngFormOptions]="{updateOn: 'submit'}">

11. Improvements in Compiler, because you can use benefits of running ng serve with the AOT flag turned on.
    

    ng serve --aot

12. Preserve Whitespace, it is defined in each component of decorator and by default is true.
    

    @Component({
    templateUrl: 'about.component.html',
    preserveWhitespaces: false
    }
    export class AboutComponent {
    }

    
    Otherwise you can define in your tsconfig.json file, by default is true.
    

    {
    "extends": "../tsconfig.json",
    "angularCompilerOptions": {
      "preserveWhitespaces": false
    },
    "exclude": [
      "test.ts",
      "**/*.spec.ts"
    ]
    }

13. New Router Lifecycle Events

Speciality of Angular 6 :-

Angular 6.0.0 beta Version has been released on March 2018 and Stable Version should be released in First Week of April 2018.

Angular beta Version is released with a lot of bug problems fixed and added new features and changes.

Important Key attributes of Angular 6 :-

1. Bazel Compiler
2. Ivy Renderer
3. Closure Compiler
4. Component Dev Kit (CDK)
5. Service Worker
   Syntax :-
   (a)
   

   ng generate universal <name>

   
   (b)
   

   ng build --app=

6. Ng update and Schematics
7. Updates in Animations,Forms and Router
8. Add CDK stable Version
9. Support of Native element
10. 2.7+ Typescripts
11. Decorator Error messages are improved.
12. Changes in ngmodel
    Example :- Previously ngmodel look like,
    

    <input[(ngModel)]="firstname(ngModelChange)="onChange($event)>

    
    And
    

    onChange(value) {
    console.log(value);  
    }

    
    Now, It’s look like,
    

    <input#modelDir="ngModel"[(ngModel)]="firstname"(ngModelChange)="onChange(modelDir)">

    
    And
    

    onChange(NgModel: NgModel) {
    console.log(NgModel.value);
    }

13. In FormBuilder multiple Validators are added for array method
    Example :-
    

    bookForm: FormGroup;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.bookForm = this.formBuilder.group({
    name: ['', Validators.required],
        options: this.formBuilder.array([], [MyValidators.correctname,  MyValidators.totalCount])
     });
    }

Conclusion : –

That’s it ..

Angular 5 & Angular 6 is faster than earlier version, also size of applications are reduced and supported multiple names, directives and component which is useful to migrate without break changes.

It is more interesting.

Thank You..