New features of Angular 4

Let us now see the new features added to Angular 4 −

ngIf

Angular2 supported only the if condition. However, Angular 4 supports the if else condition as well. Let us see how it works using the ng-template.

*ngIf="isavailable; else condition1">Condition is valid.
Condition is invalid

as keyword in for loop

With the help of as keyword you can store the value as shown below −

ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}

The variable total stores the output of the slice using the as keyword.

Animation Package

Angular 4 is available as a separate package and needs to be imported from @angular/animations. 

In Angular2, it was available with @angular/core. 

Template

Angular 4 uses  as the tag instead of  

TypeScript 2.2

Angular 4 is updated to a recent version of TypeScript, which is 2.2.

Pipe Title Case

Angular 4 has added a new pipe title case, which changes the first letter of each word into uppercase.

   



{{ 'Angular 4 titlecase' | titlecase }}

The above line of code generates the following output – Angular 4 Titlecase.

Http Search Parameters

Search parameters to the http get api is simplified. We do not need to call URLSearchParams for the same as was being done in Angular2.

Smaller and Faster Apps

---