Angular 4 Features – 5 Features To Watch Out For in Angular v4

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 GIT

upcoming version of angularjs
upcoming version of angularjs

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



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: ''})
      .delay(new Date( + 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:



  {{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 {
// Animation members
// members state
// members style
// members 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
// state members
// style members
// transition members
// 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.

Leave a Comment

Your email address will not be published. Required fields are marked *

86  +    =  94

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US