Learn how to build an app using the exciting new features in the JavaScript framework.
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.
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:
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.
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.
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");
}
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.
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>
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.
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!
