Learning Angular 2: Tour of Heroes Tutorial, Quick Start and Shortcuts

Now that I've gone through the official Angular 2 quick start tutorial, it's time to start the longer "Tour of Heroes" tutorial, starting with lesson 2 (lesson 1 is just an overview of what will be covered in the entire tutorial).

I decided to start with a fresh IntelliJ project in a new "angular-io-tourofheroes" directory. I set it up the same way as I did for the quick start tutorial files and copied all of the configuration files and TypeScript files from the quick start project over. Although not strictly necessary, I changed the "name" value in package.json to "angular2-tourofheroes" before running "npm install".

I once again went into the IntelliJ preferences/settings to have the TypeScript compiler that comes with IntelliJ take care of watching for file changes and compiling on-the-fly...but initially, I forgot to check the "Use tsconfig.json" option, so I saw quite a few errors listed in IntelliJ's TypeScript compiler window:

The syntax for setting properties in the AppComponent surprised me a bit:

title = 'Tour of Heroes';

...I would have expected a declaration keyword like "var" or "let", or a key:value syntax instead. They could be untyped TypeScript class properties:  if I declare the title data type as "String" and then try to assign it the value of 2, I get a TypeScript compiler error. But if that's the case I would expect to get compiler errors when I go into tsconfig.json and set "noImplicitAny" to "true" instead of "false" (which I would expect to force me to declare data types for all variables and class properties), and that doesn't happen.

Peeking ahead, the Hero class conforms to what I would expect as the property syntax for a TypeScript class, so maybe the Component decorator contains code that allows for a slightly briefer syntax. Something to look into, I guess.

When I got to the step where the code is switched from one-way data binding to two-way data binding, I made the change manually instead of copying and pasting the code, so I mistakenly kept the interpolated syntax for the hero name:

<input [(ngModel)]="{{hero.name}}" placeholder="name" />

...the result of that was that Angular broke during the rendering process (leaving the "Loading..." message), and in the console in Chrome I got the error "EXCEPTION: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{hero.name}}]". Removing the curly braces from around "hero.name" of course fixed the problem.

The syntax of "[(ngModel)]" seems like an odd syntax at first until you read the background behind it: I think a sentence or two about the fact that it's shorthand for combining two separate bindings—the data binding with "[ ]" and change event binding with "( )"—is warranted here for those folks who don't follow the reference links to the guide chapters and find the syntax a turn-off. Still, I sense a keyboard shortcut for inserting "[(ngModel)]" into my code is in my future.

It looks like you can also do one-way data binding on the value of an input by just using [ngModel]. This code:

<input [ngModel]="hero.name" placeholder="name" />

...still displays the name value in the input, but just like when using interpolation changing the name in the input does not change it in the model. Yet another reason for a keyboard shortcut for the two-way binding: it would be easy to miss adding the inner "( )" as you're typing, and you wouldn't get an error but you also wouldn't get the two-way binding you expect.

So ends the first coding lesson.