Angular4 Features:
1.Next version of Angular2
2.Angular3 is not there because in angular2 router module 3.3.0
3.Animations Module got separated @angular/animations
Angular2:
import {component,animate,style,transition,trigger} from '@angular/core';
Angular4:
import {component} from '@angular/core';
import {animate,style,transition,trigger} from '@angular/animations';
4.Faster & Smaller
Angular team introduces a new view engine system, which can reduce the size of
generated code for our components by around 60%!
5.Improved *ngIf and *ngFor
Ex1:
<div *ngIf="User.length>0;else empty">
User number
</div>
<ng-template #empty>Loading...</ng-template>
Ex2:
<div *ngIf="activated; else hidden">
Some content
</div>
<ng-template #hidden>Your hidden code</ng-template>
Ex3:
<div *ngIf="mydata; then temp1 else temp2">
Some content
</div>
<ng-template #temp1>True</ng-template>
<ng-template #temp2>False</ng-template>
mydata=true;
6.As keyword added
<div *ngFor="let user of users;count as count[user]='userid'">
{{user}}{{count}}
</div>
7.Search parameters got simplified
before:
const param =new UrlSearchParam();
params.append('sort','ascending');
http.get(${baseurl}/api/users;{search:params}});
after :
http.get(${baseUrl}/api/users,{params:sort:ascending});
8.New service introduced for creation of metadata
9.Form validations got improved
required,minlength,email validations
<input type="email"/>
10.comparewith new directive got included
<select [comparewith]='by uid'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
11.In Routing ParamMap and QueryparamMap
Up until now, route parameters were stored in a simple key-value object structure,
therefore being accessible by using the standard JavaScript syntax
(parameterObjekt[�parameter-name�] ).
class MyComponent {
sessionId: Observable<string>;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sessionId = this.route
.queryParams
.map(params => params['session_id'] || 'None');
}
}
Now, the parameters are also available as a map, so you can run them as simple
method calls (parameterMap.get(�parameter-name�)).
class MyComponent {
sessionId: Observable<string>;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sessionId = this.route
.queryParamMap
.map(paramMap => paramMap.get('id') || 'None');
}
}
12. CanDeactive interface inroduced
13.View Engine size reduced
ng serve --aot (ahead of time)
Jit--> just in time
angular 2,Angular 4 -JIT each and html,css ,javascript
Angular _AOT
14.Pipes TitleCase
{{srinivas rao | titlecase}} --> Srinivas Rao
15.i18n -->internationalization tiny bit improved
srini|uppercase
npm i18n {{i18n.label.labelname}}
16.To Upgrading From angular2 to Angular4 run below command
For Mac users:
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-
browser,platform-browser-dynamic,platform-server,router,animations}@latest
typescript@latest --save
For Windows users:
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-
browser,platform-browser-dynamic,platform-server,router,animations}@next �save
17.Typescript allows now Strictnullcheck
Ex:
let x:string |null | number = String | null|number
let y = Number | undefined
let z = Array<String> | null | undefined
ex:Angular2:
let num1: number;
num1 = null;
console.log(num1);
Angular4:
let num1: number | null ;
num1 = null;
console.log(num1);
18.Angular Universal
Angular Universal allows you to run your Angular App on the server.
Using Universal helps improve the rendering performance for first time visitors as
the first view is generated by the server as soon as a page is requested and the
angular client size library downloads in the background.
With Angular Universal, it�s possible to render Angular applications outside of the
browser, for instance directly on the web server. With that, JavaScript is no
longer necessary for initially rendering the page content, so websites can be
optimized better for search engines. Another use case is the utilization of
WebWorker Threads to render content outside the GUI Thread. This rendered content
can simply be added to the DOM Tree for display later.
19.FESM : Flattened ECMAScript Module
This format should help tree-shaking, help reduce the size of your generated
bundles, and speed up build, transpilation, and loading in the browser in certain
scenarios.
20.Replaced Template with ng-template
angular2:
<template [ngIf]="isVisible"> Conditional statement </template>
angular4:
<ng-template [ngIf]="isVisible"> Conditional statement </ng-template>
