Page 70 - MSDN Magazine, September 2017

Figure 4 Set Up SpeakerService in the Providers Array
What the code should’ve been doing all along is using a property- binding declaration instead of the string interpolation syntax. Fortunately, this is easily fixed:
<app-upvote [model]="speaker.votes"><b>Current Upvotes:</b></app-upvote>
The expression will be evaluated,and the result bound to the property in question.
Note the square brackets around the name of the property you want to bind to, and notice how the value of the property-bind is a TypeScript expression to use. The expression will be evalu- ated, and the result bound to the property in question—in this case, the “model” property of the UpvoteComponent. (I chose to rename the “votes” property to “model” because that’s an emerging convention I’m using for my Angular code: For a given compo- nent, its model should be stored in a property/field called model, so I can keep straight what the principal state is, as opposed to incidental properties that might be used during the component’s lifetime.) Once the binding takes place, instead of interpolating the object to the ECMAScript default [object Object] and then passing that in, the object reference itself will be sent to the UpvoteComponent, which recognizes it as an Upvote, and every- thing is back to loveliness again.
Lesson learned!
Wrapping Up
Things are starting to fall into place now—components are slowly taking shape around an MVC concept, and the models are being retrieved by services. You still need to get those services to obtain real data (as opposed to faking it, the way it’s being done now), and you still need some kind of ubiquitous master-detail “drill-down” display where you begin with a list of speakers and select one for more details, not to mention the ability to edit speaker details and add new speakers to the list. But, things are starting to hang together better now.
After the work done here, you can start to see how the component- based approach works collectively to “build up” an application out of mostly self-contained components. The more componen- tization that can be put into place, the easier it will be to test those components, and the more testing that can be done, the more the application will resist stupid programmer mistakes during its overall development.
There’sstillmoreworktodo...fornow...happycoding! n
Ted Neward is a Seattle-based polytechnology consultant, speaker and men- tor, currently working as the director of Developer Relations at Smartsheet.com. He has written a ton of articles, authored and co-authored a dozen books, and works all over the world. Reach him at ted@tedneward.com or read his blog at blogs.tedneward.com.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { UpvoteComponent } from './upvote/upvote.component'; import { SpeakerService } from './speaker.service';
@NgModule({ declarations: [
AppComponent,
UpvoteComponent ],
imports: [ BrowserModule, FormsModule, HttpModule
],
providers: [ SpeakerService ], bootstrap: [AppComponent]
})
export class AppModule { }
AppModule (app.module.ts), and it doesn’t require a rocket scientist to figure out where. There’s an empty “providers” array right in the AppModule’s NgModule decorator, just begging to have SpeakerService listed there (after doing the appropriate import to reference the speaker.service.ts file, of course). Figure 4 has the goods.
Save, run (or just wait for the browser to refresh if you still have “ng serve” running in the command-line window) and look at the loveliness.
Property Bindings
Except ... it’s not lovely. Matter of fact, if you’re running the code, you’re probably noticing that instead of a number (30), the page is displaying something like Current Upvotes: [object Object]. What’s up with that?
Opening up the developer tools console in your browser yields a hint: At the top of the stack trace Angular says “No provider for SpeakerService!” in a rather loud voice.
If you look back at the UpvoteComponent template, you’ll notice that it’s using the {{ }} syntax to obtain a value for the HTML: <app-upvote model="{{speaker.votes}}"><b>Current Upvotes:</b></app-upvote> You could get away with it for a while, but in this particular case, because you’re now handing in an actual object (instead of the earlier numeric constant), that expression is evaluating to an object, and then converted into a string before being passed in as the input to the UpvoteComponent. Bad column author! No pizza!
62 msdn magazine
The Working Programmer