Angular 4

Lesson 3—Angular 4 Features

© Simplilearn. All rights reserved.

 Learning Objectives
By the end of this lesson, you should be able to:

Discuss Angular 4

Describe if…else Template Conditions

Analyze Animation Module

Discuss TypeScript 2.1 and 2.2

Describe Angular Universal

Explain Flat EcmaScript Module (FESM)

Explain Router ParamMap

Discuss TypeScript's StrictNullChecks

Angular 4 Features
Topic 1—Introduction to Angular 4
 Introduction to Angular 4

Angular applications are now smaller and faster.

The Angular team is working on further improvements.

Changes have been made under the hood to what AOT generated code looks like.
These changes reduce the size of generated code.

The purpose of Angular 4 is to reduce the size of the generated code for a component
by an average of 60-65%.

According to Google metrics, generated code had been about 10 times the size of the
original template. With this release, generated code is now only 3 times the size of the
original template.
 Introduction to Angular 4
FORM FEATURE: EMAIL VALIDATION IN REACTIVE FORM

• Now you have email validator in forms to validate emails instead of using patterns.

• You need to just give email as an attribute to the input field where you want to have email id. Here
email is an angular directive; do not confuse with the type=”email” which is just an HTML DOM
type property.
Angular 4 Features
Topic 2—if…else Template Condition
 if…else Template Condition

Angular template binding syntax now supports a couple of helpful

changes.
• We can now use an if…else style syntax.

• Assign local variables when unrolling an observable.

• The “ngIf” evaluates expression and then renders the “else” or “then” template in its place when
expression is “truthy” or “falsy” respectively.

<div *ngIf=“DepartmentList | async as dept; else

loading">
<dept-profile *ngFor="let dept of depts; count as
count; index as i" [dept]=“dept"> Department {{i}}
of {{count}}
</department-profile>
</div>
<ng-template #loading>Loading...</ng-template>
Angular 4 Features
Topic 3—Animation Module
 Animation Module

Animations have been pulled out of @angular/core and put into their own package. This means that if you
don’t use animations, this extra code will not end up in your production bundles.

Now a developer has to import Animation related module in NgModule by importing

BrowserAnimationsModule from @angular/platform-browser/animations.

import {Component} from '@angular/core’;

import {
animate,
state,
trigger } from '@angular/animations'
Angular 4 Features
Topic 4—TypeScript 2.1 and 2.2
 TypeScript 2.1 and 2.2

Angular4 is updated to a more recent version of TypeScript.

This will improve the speed of ngc, and you will get better type checking
throughout your application.

In TypeScript 2.1 and 2.2 version, new quick fixes are available for unused
variables, unimplemented abstract methods, etc.
Angular 4 Features
Topic 5—Angular Universal
 Angular Universal

• In Angular 1, Server-side rendering was very difficult to perform.

• Universal is the project that lets the programmers run Angular on a server, and it is now up to date with
Angular.
• Server-side rendering is the act of spitting the same HTML content in virtual DOM to the server so that
they are rendered appropriately by the browser on request.
• Server-side rendering was not done in web development until single page apps came.
• Such apps use a virtual DOM concept which abstracts DOM rendering.
Angular 4 Features
Topic 6—Flat ES Modules (FESM)
 Flat ES Modules (FESM)

Angular now ships flattened versions of modules. Angular 4 also ships the packages in
the ES2015 Flat ESM format.

FESM feature will help application in tree-shaking, and help to reduce the size of
generated bundles, speed up build, transpilation, and loading in the browser.

Developers have reported 6-7% bundle size savings when combining these packages
with Rollup.
Angular 4 Features
Topic 7—Router ParamMap
 Router ParamMap

• Angular 4 comes with some changes in the router.

• A route can receive the parameters either by using a snapshot property of the ActivatedRoute or by
subscribing to its property param.
• There is a property “ParamMap” that allows you to either get a particular parameter by using the
method get() or get all parameters by invoking getAll().

class MyComponent {
sessionId: Observable<string>;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
this.sessionId = this.route
.queryParamMap
.map(paramMap => paramMap.get('session_id') ||
'None');
}
}
Angular 4 Features
Topic 8—TypeScript StrictNullChecks
 TypeScript StrictNullChecks
Null and undefined are JavaScript valid first class type citizens. Earlier, TypeScript didn't adhere to first class type
citizens, which meant you can't define a variable and tell TypeScript that this variable's value can be null or
undefined.
TypeScript StrictNullChecks feature is now compliant in Angular (v4), and the code is given below:
export class AppComponent implements OnInit{

canBeNull: String | null;

canBeUndefined: Number | undefined;
canBeNullOrUndefined: String | null | undefined;

ngOnInit() {
this.canBeNull = null;
console.log(this.canBeNull); // null

this.canBeUndefined = undefined;
console.log(this.canBeUndefined); // undefined

this.canBeNullOrUndefined = null;
console.log(this.canBeNullOrUndefined); //null
this.canBeNullOrUndefined = undefined;
console.log(this.canBeNullOrUndefined); // undefined
}
}
 Key Takeaways

Using Angular 4, applications are now smaller and faster.

We can now use an if…else style syntax.

Animations have been pulled out of @angular/core, and now they have to be
used while adding the extra code in production bundles.

In TypeScript 2.1 and 2.2 version, new quick fixes are available for unused
variables, unimplemented abstract methods, etc.

Universal is the project that lets the programmers run Angular on a server, and it
is now up to date with Angular.

Angular now ships flattened versions of modules, and ships the packages in the
ES2015 Flat ESM format.
Quiz
QUIZ Which of the following has been pulled out of @angular/core and put into its own
1 package?

a. If…else Statement

b. Animation

c. Universal

d. FESM
 QUIZ Which of the following has been pulled out of @angular/core and put into its own
1 package?

a. If…else Statement

b. Animation

c. Universal

d. FESM

The correct answer is b.

Animations have been pulled out of @angular/core and put into their own package.
QUIZ ______________ is the project that lets the programmers run Angular on a server, and it is
2 now up to date with Angular.

a. FESM

b. Universal

c. Router ParamMap

d. StrictNullCheck
 QUIZ ______________ is the project that lets the programmers run Angular on a server, and it is
2 now up to date with Angular.

a. FESM

b. Universal

c. Router ParamMap

d. StrictNullCheck

The correct answer is b.

Universal is the project that lets the programmers run Angular on a server, and it is now up to date
with Angular.
QUIZ
Expand FESM.
3

a. Framework EcmaScript Module

b. Function EcmaScript Module

c. Flat EcmaScript Module

d. Finite EcmaScript Module

 QUIZ
Expand FESM.
3

a. Framework EcmaScript Module

b. Function EcmaScript Module

c. Flat EcmaScript Module

d. Finite EcmaScript Module

The correct answer is c.

FESM stands for Flat EcmaScript Module.
Thank You