Today on the show we investigate Angular 2 [property] syntax - and also explore the wonders of per-component styling.

Now with click events and dynamic styles!

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script to follow along at home:

[ ] You can hack DOM properties directly with [prop] syntax (not the quotes inside the quotes)

[style.color]='"red"'

[ ] You can also do per-component styling that won’t clash with the rest of your layout:

.like {
    color: red !important;
} 

.retweet {
    color: red !important;
}

[ ] But we want that to be conditional, so we’ll change the classes

.liked {
    color: red !important;
} 

.retweeted {
    color: red !important;
}

[ ] Be good to do this conditionally using ngClass directive

[ngClass]='{ retweeted: isUserInCollection(tweet.retweets, "Glen") }'

[ngClass]='{ retweeted: isUserInCollection(tweet.retweets, "Glen") }'

[ ] Cheer our awesomeness. We’ve learned about (events) and [properties]. Tomorrow, the textbox cometh!