Angular 2 is basically a collection of Components brought together within modules. The many tools, such as the Angular CLI, allow you to easily create Components. The key to understanding Angular 2 is understanding how Components interact with each other through Services, Inputs, and Outputs. It's also essential to understand the basics of styling components and how CSS is shared so you can make your application look the way you want.

The quickest way to get started with Angular 2 is to use the Angular CLI. The Angular CLI allows you to create new projects and startup a server in just a couple quick commands. This lesson shows how to install the cli, start the server, and make a simple change.

angular

Say "Hello World" to Angular 2

The simplest way to create a new component is again to use the Angular CLI. The Angular CLI can quickly generate components for you to use inside your modules and your templates. This lesson walks through using the Angular CLI to generate an Angular 2 Component then using that Component in your application.


Create a Simple Angular 2 Component

Angular 2 provides powerful template syntax to access events and elements inside of your Component's class. This lesson shows how to access the click events off of a button and the values and element off of an input.


Manage Angular 2 Elements with Events and Refs

This lesson talks about the benefits of using the parens-based `(click)` syntax so that Angular 2 can handle any custom event. Then the video explains how to pass in the actually event object using the familiar `$event` syntax.

Control Angular 2 Events with $event and Event Handlers

The Angular CLI generates Services using a simple command. After your Service is generated, you can easily provide and share it to the rest of your application using Angular 2's Dependency Injection. This lesson walks through creating a Service with the Angular CLI then providing it to your application module.

Share Services and Data with Angular 2 Dependency Injection

TypeScript is used heavily as we build up our application, but TypeScript isn’t required. If you want to Inject a Service without using TypeScript, you’ll need to understand the `@Inject` decorator. The `@Inject` decorator also allows you to provide any value or object that you need to share throughout your application without having to create a service. 


Provide and Share Values with Angular 2 Dependency Injection

This lesson covers Angular 2’s version of looping through data in your templates: `*ngFor`. It’s conceptually the same as Angular 1’s ng-repeat, but you’ll find the syntax quite different as it aligns with #refs in Angular 2 and JavaScript “for of” loop.

Loop Through Angular 2 Components with ngFor

@Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse components and have them display different values for each instance of the renderer.

Pass Values into Angular 2 Components with @Input

Two-way binding still exists in Angular 2 and `ngModel` makes it simple. The syntax is a combination of the [input] and (output) syntax to represent that the data is being pushed out and pulled in.

Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding

Components push out events using a combination of an `@Output` and an `EventEmitter`. This allows a clean separation between reusable Components and application logic. This lesson shows how to use `@Output` to create an update event and then listen for the event in your application.

Pass Events from Angular 2 Components with @Output

Many Components require different styles based on a set of conditions. Angular 2 helps you style your Components by allows you to define CSS and styles inline, then choosing which styles to use based on the current values in your Controller.

Write CSS Inside of Angular 2 Components

`ngClass` is Angular 2's way of allowing you to apply classes and styles based on what's happening in your component. While CSS covers many scenarios with pseudo classes, you'll often run into scenarios where you need to apply classes based on certain conditions, so `ngClass` comes to the rescue.

Apply CSS Classes Conditionally with Angular 2’s ngClass

Global CSS and stylesheets are also available to Angular 2 Components even though the styles you define inline will remain isolated to the Component itself. You can customize this behavior using `ViewEncapsulation` if you need to keep global styles out of your Components.

Get Started with Angular 2

John Lindquist

Course Content