What’s new in Angular 4?

11. View engine

Let’s see what new features we can use in 4.0. The new view engine compiles to a much smaller bundle, meaning extra performance benefits from using AoT compilation with the Angular compiler ngc

This means that compilation happens at build time, once, rather than multiple times in the browser at runtime. Let’s give it a try with our app.

$ npm install @angular/compiler-cli @angular/platform-server --save

12. Create AoT config file

We need to create a new config file to tell our ngc compiler what’s what. Create a new file in the project root and name it tsconfig-aot.json. Enter the following configuration:

  "compilerOptions": {
  "target": "es5",
  "module": "es2015",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "lib": ["es2015", "dom"],
  "noImplicitAny": true,
  "suppressImplicitAnyIndexErrors": true
  "files": [
"angularCompilerOptions": {
  "genDir": "aot",
  "skipMetadataEmit" : true

13. Initiate AoT compiler

We can now run our ngc compiler, and there’s an intentional bug in our code so we can see it working.

$ node_modules/.bin/ngc -p tsconfig-aot.json

14. Fix the bug

In our items.component.ts file, we’ve forgotten to assert the type of our ‘item’ parameter. This doesn’t show up as an error in the editor but might cause problems at runtime. Ngc enables us to catch these issues early. Correct buyItem and cancelItem.

buyItem(item: Item) {
item.inBasket = true;
cancelItem(item: Item) {
item.inBasket = false;

15. Email validator

Another handy new feature in 4.0 is the new email validator, which makes it much easier to validate an ngForm input type of email. Maybe our Flower Shop needs a newsletter. First, import the FormsModule to ngModule.

import { FormsModule } from '@angular/forms';
  imports: [

16. Form template

Next, add an ngForm field in the item.component.html template.

  <div class="emailContainer">
  <form #form="ngForm" (submit)="handleSubmit(form)">
  Enter your email address to subscribe to our newsletter:
  <input type="email" [(ngModel)]="emailEntry" name="emailEntry" email/>
  <input [disabled]="!form.valid" type="submit" value="Submit" />

17. Handle inputs

Include handling for the email address input form field to item.component.ts.

@Input() emailEntry: string;
  handleSubmit(form: any)
  alert("Email address: "+form.value.emailEntry+" has been subscribed to the Flower Shop newsletter");

18. Test in the browser

Our email validator easily recognises only valid email addresses

We should find that we can only use the Submit button when we’ve entered a string that meets the basic criteria for an email address. Well that was easy!

19. Update the structural directive syntax

The final thing we’re going to update is our structural directive syntax. ngFor and ngIf both have extended syntax options. ngIf now allows an else conditional. Let’s modify our ngIf in items.component.html to include an else. The element selected by the else condition must be within an ng-template.

<div *ngIf="item.inBasket; else buy">
  <p class="status">Item Reserved</p>
  <button class="button-cancel" (click)=
"cancelItem(item)">Cancel Purchase</button>
<ng-template #buy>
  <button class="button-buy" (click)="buyItem(item)">Buy Flower</button>

20. Update the ngFor syntax

We have updated syntax in ngFor iterators to enable the as keyword to track an index. It’s trivial and doesn’t add much value to our Flower Shop app, but say we were receiving high volumes of item.json objects over HTTP and wanted to limit or count how many we are displaying on the page, this change makes that much easier.

section class="card" *ngFor="let item of items; index as i">
  <div class="panel-body">
  <div class="photo">
  <table class="item-info">

21. New pipes

Titlecase pipe applied to flower description text forces the first letter of each word to be capitalised

Finally, we have a new pipe! Titlecase can be used to force capitalisation of the first letter of each word in a string. This can be useful for consuming data from name and address form fields, for example. Let’s test it out on the interpolated item descriptions.

  <h3 class="item-name">{{item.name}}</h3>
  <p class="description">{{item.about|titlecase}}</p>

There’s lots more 
to explore with Angular 4, with the most significant improvements in larger apps, but hopefully this tutorial has made updating seem a little less daunting!

This article first appeared inside Web Designer issue 262 – buy it now.

Related articles: