ng2

Watch User Created Playlist (84)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Define Two-Way Transitions for Angular 2 States

Animate Adding and Removing Angular 2 Elements with ngIf

Use Keyframes for Fine-Tuned Angular 2 Animations

Delay and Ease Angular 2 Animations

Animate Between Angular 2 States Using Transitions

Control Undefined Angular 2 States with void State

Switch Between Angular 2 States on a Trigger

Define an Angular 2 Trigger and State

Apply CSS Classes Conditionally with Angular 2’s ngClass

Pass Events from Angular 2 Components with @Output

Pick Up Angular 2 in 6 Minutes

Check ngModel Validation in Angular 2

P

Create a Basic Angular 2 ngModel Input

Use RxJS Streams with Angular 2 Forms

P

Understand the Angular 2 States of Inputs: Pristine and Untouched

P

Create Radio Buttons for Angular 2 Forms

P

Build Select Dropdowns for Angular 2 Forms

P

Style Validation in Angular 2 Forms

P

Group Inputs in Angular 2 Forms with ngModelGroup

P

Display Validation and Error Messaging in Angular 2

P

Create and Submit an Angular 2 Form using ngForm

P

Generate and Render Angular 2 Template Elements in a Component

P

Build fully reactive APIs in Angular 2 with Observables

P

Prevent unnecessary requests in Angular 2 with distinctUntilChanged

P

Deal with out of order responses in Angular 2 using switchMap

P

Combine Observables in Angular 2 with flatMap

P

Debounce the user input in Angular 2 using debounceTime

P

Consuming events as Observables in Angular 2

Create an Angular 2 Hello World Component

Load Data Based on Angular 2 Route Params

P

Load Data to Build Angular 2 Navigation

P

Build Dynamic Angular 2 Navigation with ngFor

P

Understand the Angular 2 Base href Requirement

P

Use Params from Angular 2 Routes Inside of Components

P

Style the Active Angular 2 Navigation Element with routerLinkActive

P

Lazy Load Angular 2 Modules with the Router

P

Build Angular 2 Navigation with routerLink

P

Map a Second Angular 2 Route to a Component

P

Configure Your First Angular 2 Route

Structure a Basic Angular 2 Application

P

Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

P

Order Dynamic Components Inside an Angular 2 ViewContainer

P

Manipulate and Access DOM Elements with Angular 2 Renderer

P

Move and Delete Angular 2 Components After Creation

P

Set Values on Generated Angular 2 Templates with Template Context

P

Select From Multiple Nested Angular 2 Elements

P

Set Properties on Dynamically Created Angular 2 Components

P

Style Angular 2 Components

P

Generate Angular 2 Components Programmatically with entryComponents

P

Angular 2 Smart Components vs Presentation Components

P

Share a Service Across Angular 2 Components and Modules

P

Create Shareable Angular 2 Components

P

Create Application-Specific Angular 2 Components

P

Introducing Angular 2 Concepts in Angular 1

Angular 2 - Building a Toggle Button Component

P

Using the Async Pipe in Angular 2

Review of Angular 2, RxJS, and Reducers from ngrx/store

P

Using ngrx/store and Reducers for Angular 2 Application State

P

WebStorm - Setting Up Angular 2

Overview of Angular 2 and what to learn next...

Organizing Angular 2 projects by feature

Filter items with a custom search Pipe in Angular 2

Build a select dropdown with *ngFor in Angular 2

Refactoring mutations to enforce immutable data in Angular 2

Use Global CSS Inside Angular 2 Components

Write CSS Inside of Angular 2 Components

Pass Values into Angular 2 Components with @Input

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

Loop Through Angular 2 Components with ngFor

Provide and Share Values with Angular 2 Dependency Injection

Share Services and Data with Angular 2 Dependency Injection

Control Angular 2 Events with $event and Event Handlers

Manage Angular 2 Elements with Events and Refs

Create a Simple Angular 2 Component

Say "Hello World" to Angular 2

Property Binding with Angular 2 and TypeScript

P

Event Binding with Angular 2 and TypeScript

P

Angular 2 - First Directive (es5)

Angular 2 - Custom Events (es5)

Angular 2 - Events (es5)

Angular 2 - Binding (es5)

Angular 2 - Hello World (es5)

Angular 2 - Hello World (es6)

P

Angular 2: Template Syntax

angular2 tutorial about Define Two-Way Transitions for Angular 2 States

Define Two-Way Transitions for Angular 2 States

1:53 angular2

You often want to re-use a transition when going between the same two states. Angular 2 transition syntax allows you to define how the transition should be applied between states: one-way or two-way.

angular2 tutorial about Animate Adding and Removing Angular 2 Elements with ngIf

Animate Adding and Removing Angular 2 Elements with ngIf

1:49 angular2

A common use-case for an Angular 2 animation is to animate an element into the DOM. This is achieved with a combination of ngIf and the “void” state so that you have complete control over how the element appears and how it leaves.

angular2 tutorial about Use Keyframes for Fine-Tuned Angular 2 Animations

Use Keyframes for Fine-Tuned Angular 2 Animations

2:15 angular2

When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define and precise styles and steps over time. Keyframes allow you to achieve pretty much any Angular 2 animation you want.

angular2 tutorial about Delay and Ease Angular 2 Animations

Delay and Ease Angular 2 Animations

3:11 angular2

By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time.

angular2 tutorial about Animate Between Angular 2 States Using Transitions

Animate Between Angular 2 States Using Transitions

1:11 angular2

The foundation of animation in Angular 2 is using transitions to move from one state to another state. Transitions bring in the concept of time and how long it should take to go from one state to the next while they almost magically calculate the difference in values over time between the CSS properties of each state.

angular2 tutorial about Control Undefined Angular 2 States with void State

Control Undefined Angular 2 States with void State

2:05 angular2

Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your currently defined states. You have to be aware of when you’re in that state so that you don’t stumble on any undesired behaviors. This is especially important if your transitions cover “*”/all states because “void” is part of “all”.

angular2 tutorial about Switch Between Angular 2 States on a Trigger

Switch Between Angular 2 States on a Trigger

1:04 angular2

Triggers work in combination with states to define ways of getting from one state to the next. This lesson covers how to create multiple states then cause the trigger assignment to update from one state to the next.

angular2 tutorial about Define an Angular 2 Trigger and State

Define an Angular 2 Trigger and State

1:32 angular2

Triggers are a special type of directive prefixed with an “@” that allow your elements to be bound to defined animations in the @Component decorator. Each trigger is represented by a defined animation trigger and each trigger can support many states.

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

Apply CSS Classes Conditionally with Angular 2’s ngClass

2:10 angular2

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.

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

Pass Events from Angular 2 Components with @Output

3:54 angular2

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 even in your application.

angular2 tutorial about Pick Up Angular 2 in 6 Minutes

Pick Up Angular 2 in 6 Minutes

6:09 angular2

Angular 2 has many new moving parts, but the basics still focus on Components with templates, properties, events, and styles. This lesson walks through the template syntax and features inside of the Angular 2 components so that you can start building quickly.

angular2 tutorial about Check ngModel Validation in Angular 2

Check ngModel Validation in Angular 2

0:55 angular2 PRO

Checking the validity of an Angular 2 input using ngModel is simply a matter of getting a reference to the ngModel itself. You get the reference by using the #ref syntax, assigning it a name, then ngModel will check all of the validity rules for you.

angular2 tutorial about Create a Basic Angular 2 ngModel Input

Create a Basic Angular 2 ngModel Input

1:39 angular2

ngModel is a very powerful feature of Angular 2, but it isn’t enabled by default. You need to import the Angular 2 FormsModule and use the proper syntax around the ngModel directive to enable the features (such as automatically updating from an ngModel) that you would expect.

This lesson starts with a Angular 2 hello world app. To quickly set that up use the angular cli which will set up the boilerplate needed to get started.

angular2 tutorial about Use RxJS Streams with Angular 2 Forms

Use RxJS Streams with Angular 2 Forms

3:05 angular2 PRO

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the values of the form when the form is valid.

angular2 tutorial about Understand the Angular 2 States of Inputs: Pristine and Untouched

Understand the Angular 2 States of Inputs: Pristine and Untouched

1:44 angular2 PRO

Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the input has been “touched” or changed. This lesson explains and compares those states so you can use them to make complex validity requirements.

angular2 tutorial about Create Radio Buttons for Angular 2 Forms

Create Radio Buttons for Angular 2 Forms

5:48 angular2 PRO

Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels will match up with each input. This lesson shows how to use *ngFor with radio buttons and covers the quirks of the id property and for attributes as well as how to style validation of radio buttons.

angular2 tutorial about Build Select Dropdowns for Angular 2 Forms

Build Select Dropdowns for Angular 2 Forms

1:10 angular2 PRO

Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop through your values and create options and use ngModel to keep track of the value as it changes.

angular2 tutorial about Style Validation in Angular 2 Forms

Style Validation in Angular 2 Forms

1:11 angular2 PRO

Inputs using Angular 2’s ngModel automatically apply style classes of .ng-valid and .ng-invalid each time the input’s validity changes. These classes allow you easily add your own styles simply by declaring the styles in your Component decorator.

angular2 tutorial about Group Inputs in Angular 2 Forms with ngModelGroup

Group Inputs in Angular 2 Forms with ngModelGroup

1:51 angular2 PRO

The ngModelGroup directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predictable way. ngModelGroup is often used in combination with fieldset as they mostly represent the same idea of “grouping together inputs.”

angular2 tutorial about Display Validation and Error Messaging in Angular 2

Display Validation and Error Messaging in Angular 2

2:59 angular2 PRO

Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access these errors from a reference to the ngModel itself then build useful messaging around them to display to your users.

angular2 tutorial about Create and Submit an Angular 2 Form using ngForm

Create and Submit an Angular 2 Form using ngForm

2:42 angular2 PRO

Forms in Angular 2 are essentially wrappers around inputs that group the input values together into an object and also check that all the inputs are valid. Angular 2 ‘s ngForm allows you to get a reference to that object and validity and use them to display information about the form or use the ngSubmit event to save information from the form.

angular2 tutorial about Generate and Render Angular 2 Template Elements in a  Component

Generate and Render Angular 2 Template Elements in a Component

1:25 angular2 PRO

Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates.

angular2 tutorial about Build fully reactive APIs in Angular 2 with Observables

Build fully reactive APIs in Angular 2 with Observables

1:58 angular2 PRO

In this video you'll learn how Observables can improve the overall API design by designing APIs that accept Observables as arguments

angular2 tutorial about Prevent unnecessary requests in Angular 2 with distinctUntilChanged

Prevent unnecessary requests in Angular 2 with distinctUntilChanged

1:15 angular2 PRO

In this video you'll learn how to use the distinctUntilChanged operator to prevent making unnecessary requests.

angular2 tutorial about Deal with out of order responses in Angular 2 using switchMap

Deal with out of order responses in Angular 2 using switchMap

1:34 angular2 PRO

In this video you'll learn how to deal with out of order responses using the powerful switchMap operator

angular2 tutorial about Combine Observables in Angular 2 with flatMap

Combine Observables in Angular 2 with flatMap

2:10 angular2 PRO

In this video you'll learn how to combine multiple Observable streams using the flatMap operator

angular2 tutorial about Debounce the user input in Angular 2 using debounceTime

Debounce the user input in Angular 2 using debounceTime

1:25 angular2 PRO

In this video we'll learn how to use the debounceTime operator to tame the user input for an instant search.

angular2 tutorial about Consuming events as Observables in Angular 2

Consuming events as Observables in Angular 2

3:07 angular2

In this video series we’ll take a look at Observables in Angular 2. We’ll figure out how they integrate with the http layer and how we can leverage their power to build a rock solid instant search with just a bunch of operators.

This first video walks you through the process of refactoring an existing solution to consume events from the template as Observables.

angular2 tutorial about Create an Angular 2 Hello World Component

Create an Angular 2 Hello World Component

2:32 angular2

A Hello World application in Angular 2 requires you to understand concepts around bootstrapping, modules, and components. The bootstrapping system allows you to decide which module and platform you’ll use when your app starts up as well as which components should be shown first. The Angular 2 modules define which features you’ll want to include so you can have fine control over your final project size. The Angular 2 Components then become a simple definition of a template with variables.

angular2 tutorial about Load Data Based on Angular 2 Route Params

Load Data Based on Angular 2 Route Params

5:16 angular2 PRO

You can load resource based on the url using the a combination of ActivatedRoute and Angular 2’s Http service. Since the params and Http are both streams, you can use RxJS to get the data off the param then switchMap over to an Http request using that data.

angular2 tutorial about Load Data to Build Angular 2 Navigation

Load Data to Build Angular 2 Navigation

3:29 angular2 PRO

Using the Http service, you can load in data to create your routerLink navgation. This builds on the same concepts of using *ngFor, but since Http uses streams, you’ll need to use the | async pipe to be able to properly display the loaded data.

angular2 tutorial about Build Dynamic Angular 2 Navigation with ngFor

Build Dynamic Angular 2 Navigation with ngFor

1:49 angular2 PRO

It’s often easier to build out your navigation dynamically so that you have programmatic control of which navigation elements appear (and those which don’t). You can leverage the power of Angular 2’s *ngFor directive to build out navigation based on any set of data you provide with urls.

angular2 tutorial about Understand the Angular 2 Base href Requirement

Understand the Angular 2 Base href Requirement

3:48 angular2 PRO

The <base href=”/”/> you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use / as your base href, it’s important to understand what’s going on in case you need to change how you’re hosting your project.

angular2 tutorial about Use Params from Angular 2 Routes Inside of Components

Use Params from Angular 2 Routes Inside of Components

3:07 angular2 PRO

Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. Params on the ActivatedRoute are provided as streams, so you can easily map the param you want off of the stream and display it in your template.

angular2 tutorial about Style the Active Angular 2 Navigation Element with routerLinkActive

Style the Active Angular 2 Navigation Element with routerLinkActive

1:53 angular2 PRO

You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a route matches the routerLink defined on the element, then the routerLInkActive will add the class that you assign it to.

angular2 tutorial about Lazy Load Angular 2 Modules with the Router

Lazy Load Angular 2 Modules with the Router

5:15 angular2 PRO

Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional modules as you define them in your routes. Make sure to properly organize your files into Angular 2’s module pattern so that files that belong to each module don’t get required by other modules.

angular2 tutorial about Build Angular 2 Navigation with routerLink

Build Angular 2 Navigation with routerLink

0:38 angular2 PRO

Angular 2 navigation is configured using the routerLink directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular 2’s router to navigate between your defined routes.

angular2 tutorial about Map a Second Angular 2 Route to a Component

Map a Second Angular 2 Route to a Component

0:49 angular2 PRO

Mapping Angular 2 routes to components is fairly straight-forward, but if you’re not going to lazy load in modules, then you’ll need to make sure to reference each Component you’re using in your main App Module.

angular2 tutorial about Configure Your First Angular 2 Route

Configure Your First Angular 2 Route

3:31 angular2

Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and then importing the configured RouterModule into your main App Module.

angular2 tutorial about Structure a Basic Angular 2 Application

Structure a Basic Angular 2 Application

1:16 angular2 PRO

Angular 2 projects are separated into many different files: main, modules, components, etc. This lesson shows you how to take the Hello World example of an Angular 2 app and split it across multiple files for proper organization.

angular2 tutorial about Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

2:21 angular2 PRO

You can place content inside of the instance of your component element then manage it inside of the component’s template using ng-content. This process is called reprojection, but you may be more familiar with the term “transclusion”.

angular2 tutorial about Order Dynamic Components Inside an Angular 2 ViewContainer

Order Dynamic Components Inside an Angular 2 ViewContainer

2:08 angular2 PRO

By default, when you generate components, they will simply be added to the page in order, one after another. Angular 2 provides methods on the ViewContainer that allow you to reorder components once they’ve been created and provide the order that you want.

angular2 tutorial about Manipulate and Access DOM Elements with Angular 2 Renderer

Manipulate and Access DOM Elements with Angular 2 Renderer

3:46 angular2 PRO

The Angular 2 renderer allows you to safely use elements created in your template regardless of the platform you’re working on. It’s important to remember that your components could easily be used inside a ServiceWorker or other platform, so you should always rely on the renderer to keep your DOM access safe.

angular2 tutorial about Move and Delete Angular 2 Components After Creation

Move and Delete Angular 2 Components After Creation

2:25 angular2 PRO

After the original order is set, you can still leverage methods on the Angular 2 ViewContainer to reorder the components. This is especially helpful when you want an event to trigger layout changes from your generated components.

angular2 tutorial about Set Values on Generated Angular 2 Templates with Template Context

Set Values on Generated Angular 2 Templates with Template Context

0:58 angular2 PRO

Angular 2 templates have a special let syntax that allows you to define and pass a context when they’re being generated.

angular2 tutorial about Select From Multiple Nested Angular 2 Elements

Select From Multiple Nested Angular 2 Elements

3:02 angular2 PRO

You have complete control over the elements you nest inside of your component instance by using selectors to access and rearrange them. Selecting allows you reconstruct the elements in whatever order you like so you can visual customize the content passed in.

angular2 tutorial about Set Properties on Dynamically Created Angular 2 Components

Set Properties on Dynamically Created Angular 2 Components

1:47 angular2 PRO

When you generate Angular 2 components, you’re still able to access the component instance to set properties and invoke methods from the component class.

angular2 tutorial about Style Angular 2 Components

Style Angular 2 Components

3:43 angular2 PRO

Each Angular 2 Component can have its own styles which will remained contained inside the component. These isolated styles allow you to add whichever styles you want without worrying about them leaking out and affecting the rest of your application.

angular2 tutorial about Generate Angular 2 Components Programmatically with entryComponents

Generate Angular 2 Components Programmatically with entryComponents

4:12 angular2 PRO

You can generate Angular 2 components using a combination of ViewContainer and ComponentFactory, but you must always remember to add the components you want to generate to your list of entryComponents otherwise the compiler will optimize the component class out of your project.

angular2 tutorial about Angular 2 Smart Components vs Presentation Components

Angular 2 Smart Components vs Presentation Components

2:25 angular2 PRO

Both Smart Components and Presentation Components receive data from Services in entirely different ways. Smart Components use constructor injection to lookup the entire service from the injector while Angular 2 Presentation components take the data from @Input defined on their component class.

angular2 tutorial about Share a Service Across Angular 2 Components and Modules

Share a Service Across Angular 2 Components and Modules

2:51 angular2 PRO

Services are used to share data between components. They follow a module pattern that allows you to use the data throughout your application so that your data is consistent and in sync.

angular2 tutorial about Create Shareable Angular 2 Components

Create Shareable Angular 2 Components

4:17 angular2 PRO

Components that you use across multiple applications need to follow a module pattern that keeps them separate from your application logic. This will allow you to make these Angular 2 components reusable and shareable and is the same pattern followed by many libraries that you may import into your projects.

angular2 tutorial about Create Application-Specific Angular 2 Components

Create Application-Specific Angular 2 Components

2:51 angular2 PRO

Many components you create will be specific to your application because they will rely on your application services. These application-specific components are often called “feature” components and they follow a module pattern which integrates them with your application.

angularjs tutorial about Introducing Angular 2 Concepts in Angular 1

Introducing Angular 2 Concepts in Angular 1

2:42 angularjs

In this introductory lesson, we will discuss how the architectural concepts of Angular 2 can be applied to AngularJS 1.x. We will also take a brief tour of the concepts that we will be covering in this series as well as how the code is structured per lesson.

angular2 tutorial about Angular 2 - Building a Toggle Button Component

Angular 2 - Building a Toggle Button Component

7:28 angular2 PRO

This lesson shows you how to build a Toggle Button in Angular 2 from scratch. It covers using transclusion in Angular 2, setting up your own two-way binding, and making the button into a reusable component.

angular2 tutorial about Using the Async Pipe in Angular 2

Using the Async Pipe in Angular 2

5:27 angular2

The Async Pipe in Angular 2 can reduce boilerplate and mental overhead when dealing with observables and promises. This lesson explores how the Async Pipe works, the code it eliminates, and demonstrates common use-cases within your applications!

angular2 tutorial about Review of Angular 2, RxJS, and Reducers from ngrx/store

Review of Angular 2, RxJS, and Reducers from ngrx/store

3:38 angular2 PRO

This lesson summarizes everything the course has covered and how Angular 2, RxJS, and ngrx/store work together to achive a reactive application.

angular2 tutorial about Using ngrx/store and Reducers for Angular 2 Application State

Using ngrx/store and Reducers for Angular 2 Application State

5:12 angular2 PRO

ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an easy api to use it within your Angular 2 application. This lesson shows how to convert a common startWith and scan stream into an ngrx Store and reducer.

angular2 tutorial about WebStorm - Setting Up Angular 2

WebStorm - Setting Up Angular 2

1:52 angular2

WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.

angular2 tutorial about Overview of Angular 2 and what to learn next...

Overview of Angular 2 and what to learn next...

4:33 angular2

This lesson recaps how all of the pieces of Angular 2 fit together. It ends with encouraging you to learn the latest JavaScript features as Angular 2 will make heavy use of the latest JavaScript language features and patterns.

angular2 tutorial about Organizing Angular 2 projects by feature

Organizing Angular 2 projects by feature

2:23 angular2

This lessons shows one way to structure your project by feature and how all you need to do is update your import statements.

angular2 tutorial about Filter items with a custom search Pipe in Angular 2

Filter items with a custom search Pipe in Angular 2

3:15 angular2

This lessons implements the Search Pipe with a new SearchBox component so you can search through each todo. It also demonstrates the patterns used for components to interact with each other. Often generic components are used for handling user input then they forward on those events (using Outputs) to components more specific to your application.

angular2 tutorial about Build a select dropdown with *ngFor in Angular 2

Build a select dropdown with *ngFor in Angular 2

4:21 angular2

This lesson walks you through building a component using ngFor on a select dropdown with options to pass in a param into the Pipe.

angular2 tutorial about Refactoring mutations to enforce immutable data in Angular 2

Refactoring mutations to enforce immutable data in Angular 2

4:16 angular2

When a Todo property updates, you still must create a new Array of Todos and assign a new reference. This lesson walks you through refactoring from the current approach to the immutable approach.

angular2 tutorial about Use Global CSS Inside Angular 2 Components

Use Global CSS Inside Angular 2 Components

1:46 angular2

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.

angular2 tutorial about Write CSS Inside of Angular 2 Components

Write CSS Inside of Angular 2 Components

2:57 angular2

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.

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

Pass Values into Angular 2 Components with @Input

1:59 angular2

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

angular2 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 angular2

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.

angular2 tutorial about Loop Through Angular 2 Components with ngFor

Loop Through Angular 2 Components with ngFor

1:58 angular2

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.

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

Provide and Share Values with Angular 2 Dependency Injection

1:50 angular2

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.

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

Share Services and Data with Angular 2 Dependency Injection

1:22 angular2

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.

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

Control Angular 2 Events with $event and Event Handlers

1:01 angular2

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.

angular2 tutorial about Manage Angular 2 Elements with Events and Refs

Manage Angular 2 Elements with Events and Refs

2:00 angular2

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.

angular2 tutorial about Create a Simple Angular 2 Component

Create a Simple Angular 2 Component

2:10 angular2

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.

angular2 tutorial about Say "Hello World" to Angular 2

Say "Hello World" to Angular 2

1:10 angular2

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.

angular2 tutorial about Property Binding with Angular 2 and TypeScript

Property Binding with Angular 2 and TypeScript

3:05 angular2 PRO

We will learn about using Angular 2's new Property Binding syntax with TypeScript. Learn to bind to DOM properties with your Angular 2 application.

angular2 tutorial about Event Binding with Angular 2 and TypeScript

Event Binding with Angular 2 and TypeScript

2:49 angular2 PRO

We will learn about using Angular 2's new Event Binding syntax with TypeScript. Learn to bind to DOM events with your Angular 2 application.

angular2 tutorial about Angular 2 - First Directive (es5)

Angular 2 - First Directive (es5)

2:24 angular2

Directives in Angular 2 are basically Components without templates. Directives allow you to interact with other components. In this video, we'll use Directive's hostListeners and Directives hostProperties to set up those relationships.

angular2 tutorial about Angular 2 - Custom Events (es5)

Angular 2 - Custom Events (es5)

4:54 angular2

Angular 2 components can emit custom events through the new EventEmitter. John walks through the process of setting up a custom event and how to interact between the parent and child components.

angular2 tutorial about Angular 2 - Events (es5)

Angular 2 - Events (es5)

3:38 angular2

Angular 2 introduces a new event syntax for connecting events on the DOM to your controllers. In this video, John walks you through the basics of the new syntax and how to handle events inside your own components.

angular2 tutorial about Angular 2 - Binding (es5)

Angular 2 - Binding (es5)

3:01 angular2

Binding in Angular 2 works much the same way as binding in Angular 1, but there are some very important differences. John covers the differences and improvements you can look forward to as you start building your own Angular 2 components.

angular2 tutorial about Angular 2 - Hello World (es5)

Angular 2 - Hello World (es5)

3:11 angular2

Angular 2 fully supports using es5 so you don't have to use TypeScript or any other transpiler to get started. John walks you through writing your first component in es5, bootstrapping it, then adding another Angular 2 component to the template.

angular2 tutorial about Angular 2 - Hello World (es6)

Angular 2 - Hello World (es6)

2:57 angular2 PRO

Getting started with Angular 2 involves a new focus on building out components. John walks through the process of bootstrapping your first component as well as how to include one component inside another.

angular2 tutorial about Angular 2: Template Syntax

Angular 2: Template Syntax

11:06 angular2

Curious about the new Angular 2 template syntax features? In this preview, John will take you on a tour.

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