Web_Designer_Issue_262_2017

Developer tutorials
What’s new in Angular 4?
Top
Using the AoT Angular compiler we can see errors before we ship our
app to the browser. In this example we’ve forgotten to assert type for
our ‘item’ parameter
Above
Our email validator easily recognises only valid email addresses and will
only enable the Submit button when one is entered into the form
Right
Titlecase pipe applied to flower description text forces the first letter of
each word to be capitalised. Unfortunately this has also been applied to
the possessive ‘s’ on Friend’S!
}
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.
Enter your email address to subscribe to
our newsletter:
17. Handle @Input
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. 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.
Item Reserved
Cancel Purchase
Buy Flower
20. ngFor
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}}
[...]
[...]
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. 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!
{{item.name}}
{{item.
about|titlecase}}
84