Learn About The Latest Angular Version, Angular V4

Dear readers, don’t get surprised as Angular 4.0.0 is out in the market immediately after Angular 2 which was released in September 2016. You may have some questions about the Angular 3? Why did they suddenly bump up the version from v2 to v4? In this article, you are going to find the answers to these questions as well as unveil the new features which are added to Angular 4.0.0.

Angular uses SEMVER (Semantic Versioning)
Angular v2 was released in September 2016 and at the same time the angular team announced that they are going to switch to SEMVER i.e. Semantic Versioning. In Semantic versioning, the type of release is classified into major, minor, or patch release and based on the nature of the software release, the software version will get bumped up accordingly. A semantic version consists of the following three numbers which has the meaning attached to them.

• Major Release: When they release a breaking change, then they increase the first number for the Semantic versioning. E.g. Angular 2 is the complete re-write version of Angular 1. Therefore, it got the first number changed from 1 to 2.
• Minor Release: When a new feature is added to the existing software, then they increase the second number for the Semantic versioning.
• Patch Release: When they fix a bug or defect and release the software then, they will increase the last number for the Semantic versioning.

Why Angular v3 is missed?
GitHub repository at ‘github.com/angular/angular’ has the core Angular libraries which are version in the same manner as 2.3.0, but they are distributed as different NPM packages as shown below. The ‘router’ package module has the different version than the ‘core’ package modules. Due to this misalignment of the ‘router’ package module version, the angular team decided to jump to the Angular v4. Therefore, the core package along with the router package will altogether have the uniform version as Angular 4.0.0.

What’s new in Angular 4.0.0?
There are limited number of breaking changes from Angular v2 to angular v4 as the version change to v4 is due to the router package version misalignment. The following are the updates in Angular v4.
• Angular v4 now requires TypeScript 2.1+ instead of TypeScript 1.8+.
• Some interfaces such as OpaqueToken, SimpleChange etc. have either altered or deprecated completely.
• All the new features of the TypeScript 2.1+ are now supported by Angular 4.0.0.

New Features added to Angular v4
The following are the new features added to Angular v4.

• The ng-templates Tag: The following are the changes at the template level in Angular v4.
1. Tag ng-template: In Angular v4, the template is now known as ng-template. As a result, the template tag is deprecated and new tag ng-template should be used in its place in Angular v4. The template tag is deprecated which means that we can still use it, but it is not recommended anymore. The template tag is an actual HTML tag whereas the ng-template tag is a new Angular tag.
2. Tag ngIf with else part: Earlier there was no else part for ngIf tag. But in Angular v4, now it is possible to use an else syntax in our template as shown below.

<ng-template>
<div *ngIf="heroes.length > 0; else empty">
<h2>Heroes</h2></div>
<ng-template #empty>
<h2>Hero not found!</h2>
</ng-template>

3. Keyword ‘as’: In the template syntax, we can use the new keyword ‘as’ which is added to the angular v4 in order to simplify the let syntax. It permits the storage of a result value into a variable of the template which can be used in the element as shown below.

<ng-template>
<div *ngFor="let hero of heroes | piece:0:2 as result; index as = index">
  {{index+1}}/{{result.length}}: {{hero.name}}
</div></ng-template>

• Ahead of Time compilation (AoT) mode: The AoT feature has been included into Angular 4.0.0. In AoT mode, Angular is capable of compiling our templates during the build time in order to generate the JavaScript code. The AoT mode is different as compared to JIT (Just in Time) mode in the way that the former mode does the compilation during the build time but the latter mode does the compilation at runtime when the application starts. The following are the advantages of AoT mode.
1. We can notice the template errors at the build time instead of the runtime, which makes the application to quick start.
2. No need to ship the Angular compiler to the users as a result the package size should be smaller.

• View Engine: Angular v4 has a new View Engine which is capable of producing less code when we use the AoT compilation mode. Therefore, with the help of view engine, we get the compressed code without any impact on the application performance. E.g. Code size with AoT has reduced from 449Kb to 165Kb, etc.

• Changes to the Universal Project: The Angular team has put an extra efforts to the Universal project that permits us to do the server-side rendering. This project was earlier maintained by the community, but with the Angular v4 release, it is an official Angular project.

• Animations: A new Animations package has been added to Angular v4 as @angular/platform-browser/animations Therefore, if your existing Angular2 app is using animation then this package need to be included and referred in the application code.

• The ‘ParamMap’ interface in Router Module: In Angular v4, a new interface paramMap or queryParamMap has been introduced which can be used to represent the parameters of a URL.

In Angular v2, we were using params or queryParams to represent the parameters of an URL. In Angular v4, we will now use paramMap or queryParamMap in place of params or queryParams to represent the parameters of an URL. They offer the options between ‘get ()’ method to get a value, and ‘getAll ()’ method to get all values (multiple values) respectively. An example is shown below.

const id = this.route.snapshot.paramMap.get(‘HeroId’);
this.heroService.get(id).subscribe(hero => this.hero = hero);

• The ‘CanDeactivate’ interface in Router Module: In Angular v4, the CanDeactivate interface has an extra (optional) parameter that contains the next state (i.e. navigate to). We can now implement customized logic, so that a user can navigate away from the current component as per application requirements.

• The titlecase Pipe: In Angular v4, a new titlecase pipe is introduced which changes the first letter of each word into uppercase as shown below.

<p>{{ 'I am extraordinary girl' | titlecase }}</p>
<!—It will display I Am Extraordinary Girl’ -->

• Http Request in Angular v4: We can now add the search parameters to an HTTP request in Angular v4 as shown below.

http.get(`${baseUrl}/api/heroes`, { params: { sort: 'descending' } });

Earlier in Angular v2, we would require writing many lines of code as shown below:

const params= new URLSearchParams();
params.append('sort', 'descending');
http.get(`${baseUrl}/api/heroes`, { search: params });

• Overriding a template in Angular v4: In Angular v4, an overriding of a template in a test has been shortened as shown below.

TestBed.overrideTemplate(HeroComponent, '<h2>{{hero.name}}</h2>');

Earlier in Angular v2, we would require writing many lines of code as shown below:

TestBed.overrideComponent(HeroComponent, {
  set: { template: '<h2>{{hero.name}}</h2>' }
});

• Service ‘Meta’: In Angular v4, a new ‘Meta’ service has been introduced in order to update the ‘meta’ tags as shown below.

@Component({
  selector: 'heroes-app',
  template: `<h1>Hero Introduction</h1>`
})
export class HeroComponent {

  constructor(meta: Meta) {
    meta.addTag({ name: 'Tom Cruz', content: 'Mission Impossible-2' });
  }
}

• Validators in Forms: In Angular v4, a new validator is introduced which is capable of joining the existing required, maxLength, minLength and pattern. E.g., we can use this validator to validate a phone number which could has a minLength, maxLength, and pattern. E.g. +1 (647)-647-9999.

• Internationalization I18n: The Angular v4 team has shown improvements in the field of internationalization to improve small things such as ngPlural (from ‘ngPluralCase=”=0″’ to ‘ngPluralCase=”0″’), etc. as shown below.

After:
<div [ngPlural]="value">
  <ng-template ngPluralCase="0">Case 0</ng-template>
  <ng-template ngPluralCase="1">Case 1</ng-template>
  <ng-template ngPluralCase="2">Case 2</ng-template>
</div>
Before:
<div [ngPlural]="value">
  <ng-template ngPluralCase="=0">Case 0</ng-template>
  <ng-template ngPluralCase="=1">Case 1</ng-template>
  <ng-template ngPluralCase="=2">Case 2</ng-template>
</div>

Conclusion: –
In this article, we discussed the new features and updates associated with Angular 4.0.0 along with the suitable examples. Angular 4.0.0 has new mind blowing features such as AoT mode, view engine for the code compression, ng-template, etc. which provides an edge over other web technologies as well as existing Angular v2.

About the Author

Tutor @ Eduonix

Administrator

View All Posts