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 --save12. 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": [
"src/app/app.module.ts",
"src/main.ts"
],
"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.json14. 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';
@NgModule({
imports: [
[...]
FormsModule
],16. Form template
Next, add an ngForm field in the item.component.html template.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
<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" />
</form>
</div> 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
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>
</div>
<ng-template #buy>
<button class="button-buy" (click)="buyItem(item)">Buy Flower</button>
</ng-template>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">
{{i}}
<div class="panel-body">
<div class="photo">
[...]
</div>
<table class="item-info">
[...]
</table>
</div>
</section>21. New pipes
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.
<td>
<h3 class="item-name">{{item.name}}</h3>
<p class="description">{{item.about|titlecase}}</p>
</td>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:
