Angular 4 - Overview

There are three major releases of Angular. The first version that was released is Angular1, which is also called AngularJS. Angular1 was followed by Angular2, which came in with a lot of changes when compared to Angular1.
The structure of Angular is based on the components/services architecture. AngularJS was based on the model view controller. Angular 4 released in March 2017 proves to be a major breakthrough and is the latest release from the Angular team after Angular2.
Angular 4 is almost the same as Angular 2. It has a backward compatibility with Angular 2. Projects developed in Angular 2 will work without any issues with Angular 4.
Let us now see the new features and the changes made in Angular 4.

Why Angular4 and Not Angular3?

The Angular team faced some versioning issues internally with their modules and due to the conflict they had to move on and release the next version of Angular – the Angular4.
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.

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

as keyword in for loop

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

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

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

Animation Package

Animation in Angular 4 is available as a separate package and needs to be imported from @angular/animations. In Angular2, it was available with @angular/core. It is still kept the same for its backward compatibility aspect.

Template

Angular 4 uses <ng-template> as the tag instead of <template>; the latter was used in Angular2. The reason Angular 4 changed <template> to <ng-template> is because of the name conflict of the <template> tag with the html <template> standard tag. It will deprecate completely going ahead. This is one of the major changes in Angular 4.

TypeScript 2.2

Angular 4 is updated to a recent version of TypeScript, which is 2.2. This helps improve the speed and gives better type checking in the project.

Pipe Title Case

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

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

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

Angular 4 applications are smaller and faster when compared to Angular2. It uses the TypeScript version 2.2, the latest version which makes the final compilation small in size.