Learn how a component is a combination of an HTML template, self-contained CSS styles, and "view-glue" logic.
We'll look at our first component in a Plunker. I'll explain what component metadata is.

We'll see our first databinding example, which uses string interpolation.  
Learn how component CSS styles are normally isolated from the rest of your application.
Understand how constructors are special in Angular.  I'll also give a quick overview of ES2015 classes.
Learn how to avoid common mistakes when writing your own components.

I'll describe some of the reasons to use TypeScript, and why you should use it to develop Angular 2 applications.

We'll take a quick peek at Visual Studio Code and you'll see how this TypeScript-aware editor can catch syntax errors.

I'll provide some videos and links to learn more about TypeScript and ES2015 features.

Learn how components compare to Angular 1 concepts.
I'll discuss some best practices to follow when creating components.

Learn how component templates use HTML plus some special Angular syntax.
I'll enumerate the different types of data bindings that Angular has.

We'll learn how interpolation binding, {{}}, binds to DOM property textContent.

We'll learn how databindings in Angular are dynamic, and how Angular change detection plays a role.
I'll introduce our first lifecycle hook, ngOnInit().
I'll also show you what an arrow function expression is, and encourage you to use the MDN website for all things JavaScript.

Learn what Angular template expressions are and their restrictions, including "the idempotent rule".

We'll use a Angular built-in pipe to transform our data for viewing, and we'll look at what other pipes Angular ships with.

Learn what the "Elvis" operator is, and why it is extremely useful (and why a there is a question about it practically every week on StackOverflow).

Since violating the idempotent rule is a recurring issue on StackOverflow, we're going to show you exactly what it means to violate this rule.

I'll also use this deep-dive excursion to introduce TypeScript getter functions.

Before I discuss more databinding techniques, we need to break up our simple Plunker app into 4 separate components.

I'll discuss element selector naming conventions and I'll show you how I could simplify some CSS styling now that we have separate components.

Learn how we can bind a parent property to a child property.  We declare the child property to be an "input" property, and we use Angular's template syntax to declare the binding in the parent's template.

Input properties allow parent components to send data to child components.
Learn how Angular change detection plays a role in propagating the data down the component tree.

I start creating our one-way databinding summary table.

We review interpolation and property binding, highlighting how they are not the same.  The subtle difference is that interpolation binding always results in a string result being bound.

Learn the important differences between HTML attributes and DOM properties.

HTML attribute values don't change.

Often an HTML attribute has a corresponding DOM property and vice versa, but not always!

Learn about Angular's template syntax for attribute, class, and style binding.

Also learn about the preferred way to bind classes and styles -- using built-in Angular directives NgClass and NgStyle.

Learn what attribute directives are, and how they are used to modify appearance or behavior.

Learn how to bind a component method to a DOM click event using the parentheses syntax.

I'll describe what happens when a button is clicked in an Angular app... how the event handler runs, then how Angular change detection runs and propagates values changes to parent components and then to the DOM.

Learn how to bind to any DOM event.

The $event keyword can be used to access the DOM event in your event handler in your component.

Learn how local template variables can be used to send useful values to your component event handlers, rather then raw DOM events.

I'll show you some special Angular syntax for dealing with keyboard events.

Learn what Angular template statements are and their restrictions.

I'll show you how to write a no-op template statement that triggers change detection.

Template statements have a statement context.

Learn what the $event keyword can contain.

Find out why template statements have fewer restrictions and are not as tricky as compared to template expressions.

Plunker was nice, but we've outgrown it for our app.  I've made a number of enhancements to the Q&a App, and I take this opportunity to switch to Visual Studio Code, an editor written in TypeScript and that is TypeScript aware.

We take a look at the online Angular 5-min quickstart, since we're using the same development environment now.

Learn about TypeScript interfaces, which give us consistent type checking across a set of objects.

I introduce some of the enhancements I've made to our Q&A app.

I'll present a brief overview of structural directives and the "*" syntax shortcut, then we'll learn how to use NgIf to conditionally add or remove a chunk from the DOM.

NgIf templates are parsed by Angular, hence components and directives can be added and removed with NgIf.

We'll make some common syntax mistakes so that when you make the same mistakes when you first start writing Angular code, you'll already be familiar with them.

Learn how to switch between multiple templates, not just one, using NgSwitch.

I'll also show you how to put your HTML template in a separate file, which allows for HTML syntax highlighting.

Learn how to iterate over a dynamic list to add or remove a template to or from the DOM multiple times.

Learn about the exported values index, last, event, and odd.

We'll look at a StackOverflow question and answer about trackBy, which can be used to specify our own object identity tracking, which is sometimes needed, since Angular's default tracking is sometimes insufficient.

I'll show you how to use NgFor to stamp out multiple instances of a custom component (not just DOM elements).

Learn how we can send data from a child property to a parent property by emitting an event on the child's output property.  We declare a child property to be an "output" property, which is always an EventEmitter, and we use Angular's template syntax to declare the event binding in the parent template.

Output properties enable  parent components to send data to child components. Learn how Angular change detection plays a role in propagating the data down the component tree.

We review input and output property operation, and how they achieve two-way communication between a parent component and a child component.

I discuss how input and output properties define the public API of a reusable component.