Angular 4 Features – 5 Features To Watch Out For in Angular v4
Angular 4 Features or Angular Features ::By now, most likely, we’ve are available in peace with the very fact that Angular are rolling out options mistreatment linguistics versioning. this suggests we have to fret less regarding nor entirely new thought (at least for now for Angular 4 Features).
Angular 4 Features :: Angular skipped version three to v4 therefore on synchronize all the various modules. The synchronize was broken once the Router module was already at v3, and therefore the alternative modules with no API breaking changes were still at v2. Jacky Kimani proclaimed v4 here at Scotch and highlighted some small print price noting regarding this version.
Angular 4 Features – Angular v4 is currently released!
With Angular 4 Features in RC, there area unit awe-inspiring options that area unit price some time. They embrace however not all:
- Angular 4 Features :: if…else syntax in element hypertext markup language templates
- Angular 4 Features :: Stand alone animation module
- Angular 4 Features :: TypeScript’s StrictNullChecks compliancy
- Angular 4 Features :: Angular Universal adoption by team to measure in core
- Angular 4 Features :: Performance boost with FESM
Installation of Angular v4
Angular v4 is in RC; this suggests you’ll begin mistreatment it in your project hoping that no breaking changes are free at final. To install, run the subsequent command:
// run this command with npm npm install @angular/@next --save
The installation needs associate update to matter.
1. If…Else templet Conditions of Angular 4 Features
Angular 4 Features :: Angular 2.x incorporates a *ngIf templet literal used for creating call supported some JavaScript-like expression:
You area unit logged in as auth.username
What if the user isn’t logged in or we have a tendency to area unit expecting the user login request to complete before displaying a message? With Angular v4 (RC), you’ll use the else syntax to handle such case:
If…Else Syntax for Angular v4
Example:
You don't seem to be allowed to ascertain our secret Our secret is being happy
// class AppComponent
export class AppComponent implements OnInit {
shown: Boolean;
auth: Observable<{}>;
// method ngOnInit
ngOnInit() {
// value false
this.shown = false;
}
}
DOM Output:
You are not allowed to ascertain our secret
SHOWING LOADING information of Angular 4 Features
Let’s have a glance at a probably realistic example:
// class AppComponent
export class AppComponent implements OnInit{
auth: Observable<{}>;
// event ngOnInit
ngOnInit() {
// value true
this.shown = true;
// value Observable
this.auth = Observable
.of({username: 'dave', password: 'me@dave.me'})
.delay(new Date(Date.now() + 4100));
}
}
We square measure simulating Associate in Nursing hypertext transfer protocol async request with discernible that returns a user payload if triple-crown. The request simulation can take four seconds thus we are able to use the else syntax to show a loading message whereas it waits:
Fetching... {{user.username }}
2. Animation Module of Angular 4 Features
Angular 4 Features :: Animation has been around since Angular a pair of however was maintained beneath @angular/core. thus if you needed to use the animation options, your import would appear as if this:
import {
Component,
OnInit
// Animation members
animate,
// members state
state,
// members style
style,
// members transition
transition,
trigger } from '@angular/core'
Angular can not enable you to try and do that, rather, you must import those animation members from @angular/animations:
import {Component, OnInit} from '@angular/core';
import {
// animate members
animate,
// state members
state,
// style members
style,
// transition members
transition,
// trigger members
trigger } from '@angular/animations'
3. TypeScript’s StrictNullChecks of Angular 4 Features
Angular 4 Features :: Originally, null and undefined square measure JavaScript valid firstclass kind voters. matter prior to now did not adhere to it, which implies you cannot outline a variable and tell matter that this variable’s price may be null or undefined .
Now, matter permits you to expressly say a variable will have any of these types:
// set x let x = String | null // set y let y = variety | vague // set z let z = Array| null | vague
The on top of example easy says:
- x will have a price of kind String or a null value
- y will have a price of kind variety or are often undefined
- z will have a price of kind Arrays with String members, are often a null or are often undefined
- This feature is currently compliant in Angular (v4), therefore you’ll do stuff like this:
// export category AppComponent
export category AppComponent implements OnInit
{
// canBeNull String
canBeNull: String | null;
// canBeUndefined variety
canBeUndefined: variety | undefined;
// canBeNullOrUndefined String
canBeNullOrUndefined: String | null | undefined;
// set ngOnInit
ngOnInit() {
this.canBeNull = null;
// print canBeNull
console.log(this.canBeNull); // null
// set canBeUndefined
this.canBeUndefined = undefined;
// print canBeUndefined
console.log(this.canBeUndefined); // vague
this.canBeNullOrUndefined = null;
// print canBeNullOrUndefined
console.log(this.canBeNullOrUndefined); //null
this.canBeNullOrUndefined = undefined;
// print canBeNullOrUndefined
console.log(this.canBeNullOrUndefined); // vague
}
}
4. Angular Universal of Angular 4 Features
Angular 4 Features :: Server-side rendering is that the act of ejection constant markup language content in virtual DOM to the server in order that they’re rendered befittingly by the browser for the asking. this enables spiders and net robots to dig your websites and index contents once necessary.
Server-side rendering wasn’t a issue in canonical net development till single page apps passed. Such apps use a virtual DOM construct that abstracts DOM rendering. a method is required to render to DOM via server requests, and Angular encompasses a resolution referred to as Angular Universal that we’ve antecedently talked concerning.
hear is project was maintained entirely outside Angularjs, however from Angular v4 forward, Universal can become a core Angularjs module. Henceforth, we’ll simply do this:
// import platformServer and renderModuleFactory
import { platformServer, renderModuleFactory } from '@angular/platform-server'
5. Flattened ECMAScript Module of Angular v4
Meaning: FESM :: Flattened ECMAScript Module
This is a really necessary update that we just can probably ne’er notice. Angular v4 ships planar versions of modules within the ECMAScript Module format. Quoting the changelog:
This format ought to facilitate tree-shaking, facilitate cut back the scale of your generated bundles, and speed up build, transpilation, and loading within the browser in sure situations.
This implies that there’ll be a comprehensible impact on performance. judgement from my take a look at, the build speed once running metric weight unit server has increased drastically.
Conclusion of Angular 4 Features
A few things to look at out for Angular 4 Features:
Updating to Angular 4 Features may mean that a number of the dependent modules are out of correct, therefore you’ve got to update them furthermore. Personally, the sole issue I had was matter that I updated to a pair of.2.1.
Code editors and plugins that perceive the Angular model syntax can still complain concerning improper syntax once you use the else keyword. this is often fine as a result of your code can still work. The plugin/editor managers can create updates as before long as they’ll.
With of these info, be at liberty to begin experimenting this shiny version. it might even be nice to assist the team and community by filing problems if you encounter a weird behavior from putting in to usage. you’ll conjointly examine different options and bug fixes if you’re thinking that it’s a necessity.