Get Started with Angular 2

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.

Watch User Created Playlist (13)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Say "Hello World" to Angular 2

Create a Simple Angular 2 Component

Manage Angular 2 Elements with Events and Refs

Control Angular 2 Events with $event and Event Handlers

Share Services and Data with Angular 2 Dependency Injection

Provide and Share Values with Angular 2 Dependency Injection

Loop Through Angular 2 Components with ngFor

Pass Values into Angular 2 Components with @Input

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

Pass Events from Angular 2 Components with @Output

Write CSS Inside of Angular 2 Components

Apply CSS Classes Conditionally with Angular 2’s ngClass

Use Global CSS Inside Angular 2 Components

angular tutorial about Say "Hello World" to Angular 2

Say "Hello World" to Angular 2

1:10 angular

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 tutorial about Create a Simple Angular 2 Component

Create a Simple Angular 2 Component

2:10 angular

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.

angular tutorial about Manage Angular 2 Elements with Events and Refs

Manage Angular 2 Elements with Events and Refs

2:00 angular

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.

angular tutorial about Control Angular 2 Events with $event and Event Handlers

Control Angular 2 Events with $event and Event Handlers

1:01 angular

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.

angular tutorial about Share Services and Data with Angular 2 Dependency Injection

Share Services and Data with Angular 2 Dependency Injection

1:22 angular

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.

angular tutorial about Provide and Share Values with Angular 2 Dependency Injection

Provide and Share Values with Angular 2 Dependency Injection

1:50 angular

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.

angular tutorial about Loop Through Angular 2 Components with ngFor

Loop Through Angular 2 Components with ngFor

1:58 angular

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.

angular tutorial about Pass Values into Angular 2 Components with @Input

Pass Values into Angular 2 Components with @Input

1:59 angular

@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.

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

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

1:43 angular

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.

angular tutorial about Pass Events from Angular 2 Components with @Output

Pass Events from Angular 2 Components with @Output

3:54 angular

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.

angular tutorial about Write CSS Inside of Angular 2 Components

Write CSS Inside of Angular 2 Components

2:57 angular

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.

angular tutorial about Apply CSS Classes Conditionally with Angular 2’s ngClass

Apply CSS Classes Conditionally with Angular 2’s ngClass

2:10 angular

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.

angular tutorial about Use Global CSS Inside Angular 2 Components

Use Global CSS Inside Angular 2 Components

1:46 angular

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?