What’s new in Angular 4

By | May 18, 2017

AngularJS is one of the most popular JavaScript frameworks to create dynamic Web apps. It is maintained by Google. In this article, I will explain what the new changes that come with Angular 4.0 are.

Why not Angular 3?

Due to misalignment of router package version . As @angular/router was using v3.3 already , so they switch to Angular 4 Finally.

What’s new in Angular 4.0?

One of the most important things is that Angular 4.0 doesn’t change that much. In Angular 4.0, some under the hood changes, some improvements, and performance improvements have been done. According to Angular change-log the “Angular 4.0 release is backwards compatible and will work with your existing code, but you may have use cases they haven’t anticipated”

Let’s see what are the new changes made in Angular 4.0.

Smaller & Faster Apps: Angular 4 applications is smaller & faster in comparison with Angular 2.

View Engine Size Reduce: Some changes under to hood to what AOT generated code compilation that means in Angular 4, improved the compilation time. These changes reduce around 60% size in most cases.

Animation Package: Animations now have their own package i.e. @angular/platform-browser/animations

Improvement : Our template binding syntax now supports a couple helpful changes. You can now use an if/else style syntax, and assign local variables such as when unrolling an observable.

<div *ngIf="userList | async as users; else loading">
 <user-profile *ngFor="let user of users; count as count; index as i" [user]="user">
User {{i}} of {{count}}
 </user-profile>
</div>
<ng-template #loading>Loading...</ng-template>

 

Angular 4.0 Supports TypeScript 2.0: Angular 2.0 supports Typescript 1 but Angular 4.0 is compitable with Typescript 2.1 and 2.2.

AS keyword: A new addition to the template syntax is the “as keyword” is use to simplify to the “let” syntax.

Example:

<div *ngFor="let user of users | slice:0:2 as total; index as = i">
 {{i+1}}/{{total.length}}: {{user.name}}
</div>

To subscribe only once to a pipe “|” with “async” and If a user is an observable, you can now use to write,

<div *ngIf="users | async as usersModel">
 <h2>{{ usersModel.name }}</h2> <small>{{ usersModel.age }}</small>
</div>

Pipes: Angular 4 introduced a new “titlecase” pipe “|” and use to changes the first letter of each word into the uppercase.

Example:

<h2>{{ 'Ravit Chaudhary' | titlecase }}</h2>
<!-- OUPPUT - It will display 'Ravit Chaudhary' -->

Http: Adding search parameters to an “HTTP request” has been simplified as,

//Angular 4 -
http.get(`${baseUrl}/api/users`, { params: { sort: 'ascending' } });

//Angular 2-
const params = new URLSearchParams();
params.append('sort', 'ascending');
http.get(`${baseUrl}/api/users`, { search: params });

Service: A new service has been introduced to easily get or update “Meta Tags” i.e.

@Component({
 selector: 'users-app',
 template: `<h1>Users</h1>`
})
export class UsersAppComponent {
 constructor(meta: Meta) {
 meta.addTag({ name: 'Blogger', content: 'Anil Singh' });
 }
}

Forms Validators: One new validator joins the existing “required”, “minLength”, “maxLength” and “pattern”. An email helps you validate that the input is a valid email.

Compare Select Options: A new “compareWith” directive has been added and it used to help you compare options from a select.

<select [compareWith]="byUId" [(ngModel)]="selectedUsers">
 <option *ngFor="let user of users" [ngValue]="user.UId">{{user.name}}</option>
</select>

 

Router: A new interface “paramMap” and “queryParamMap” has been added and it introduced to represent the parameters of a URL.

const uid = this.route.snapshot.paramMap.get('UId');
this.userService.get(uid).subscribe(user => this.name = name);

 

I hope you will enjoy to learn about the new features of Angular 4.0. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Like it? Share it
  • Tej Singh

    Good explaination and helpful, Thanks for good work

  • Ankit Chetu

    Thanks for sharing.