Page 65 - MSDN Magazine, July 2017

multicolor
hit-
highlighting
easy
options
®
Marking it with @Output means that it’s now accessible to inter- ested parties, just as @Input does, but as the names imply, one is for incoming values declared as attributes (“property-binding”) and the other as events (“event-binding”). Notice that the field name (“onIncrement”) is the name used for the event in the <app-upvote> tag when used. Assuming the AppComponent (which is the root component, the one using the <app-upvote> component) has a method on its class called “upvoted,” every time the user clicks the up-arrow, the vote count will increment, and the AppComponent will have its upvoted method called with the parameter value set to the current vote count (after incrementing).
Wrapping Up
Now, permit yourself a moment of congratulations; I’ve covered a fair amount of ground in this one, so it might take a while to settle in. Take a moment to experiment with the code and make sure the property-binding and event-binding syntaxes make sense, both from the “outside” as well as from the “inside.”
It might seem odd that you didn’t just use a number for the votes field in the UpvoteComponent; it certainly would be simpler to just track a number, but then a crucial part of the “model” concept gets lost, because now data (the vote count) would be duplicated, once in the UpvoteComponent and once wherever the vote count is tracked outside of the UpvoteComponent. Using the slightly more complicated syntax you saw previously, a user can provide an Upvote object as the parameter to the votes attribute, and the UpvoteComponent can increment it directly without requiring any additional work. In exchange for that bit of complexity bur- ied away inside the component, clients will get a better degree of simplicity (which you’ll see as you build out the example further).
There’s still some more to do, but hopefully the component concept is starting to take clearer shape now.
There’s still some more to do, but hopefully the component con- cept is starting to take clearer shape now. You still need to define a SpeakerComponent (and a Speaker model that holds the data for a given speaker), but you can well imagine what it’ll look like already, given what’s shown here. (I encourage you to take a shot at defining one before my next column comes out, to test yourself.) For now, however, happy coding! n
Ted Neward is a Seattle-based polytechnology consultant, speaker and mentor, currently working as the director of developer relations at Smartsheet.com. He has written more than 100 articles, authored and coauthored a dozen books, and works all over the world. Reach him at ted@tedneward.com or read his blog at blogs.tedneward.com.
ThaNks to the following technical expert for reviewing this article: Ward Bell
msdnmagazine.com
Instantly Search Terabytes of Data
across a desktop, network, Internet or Intranet site with dtSearch enterprise and developer products
Over 25 search features, with
dtSearch’s document filters support popular file types, emails with multilevel attachments, databases, web data
Developers:
• APIs for .NET, Java and C++
• SDKs for Windows, UWP, Linux, Mac and Android
• See dtSearch.com for articles on faceted search, advanced data classification, working with SQL, NoSQL & other DBs, MS Azure, etc.
Visit dtSearch.com for
• hundreds of reviews and case studies • fully-functional evaluations
The Smart Choice for Text Retrieval® since 1991
dtSearch.com 1-800-IT-FINDS