Angular

Watch User Created Playlist (84)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Implement Structural Directive Data Binding with Context in Angular

P

Assign a Structual Directive a Dynamic Context in Angular

P

Create a Template Storage Service in Angular

P

Combine HostBinding with Services in Angular Directives

P

Write a Structural Directive in Angular

P

Use Template Elements in Angular

P

Create Elements from Template Elements with ngTemplateOutlet in Angular

P

Build a Directive that Tracks User Events in a Service in Angular

P

Handle Events with Angular Directives

P

Add Inputs to Angular Directives

P

Write an Angular Directive

Define Two-Way Transitions for Angular States

P

Animate Adding and Removing Angular Elements with ngIf

P

Use Keyframes for Fine-Tuned Angular Animations

P

Delay and Ease Angular Animations

P

Animate Between Angular States Using Transitions

P

Control Undefined Angular States with void State

P

Switch Between Angular States on a Trigger

Define an Angular Trigger and State

Generate components with the Angular CLI

P

Install the Angular CLI to Create and Serve an Angular Application

P

Pass Events from Angular 2 Components with @Output

Pick Up Angular 2 in 6 Minutes

P

Check ngModel Validation in Angular 2

P

Create a Basic Angular 2 ngModel Input

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

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 Route Params

P

Load Data to Build Angular Navigation

P

Build Dynamic Angular Navigation with ngFor

P

Understand the Angular Base href Requirement

P

Use Params from Angular Routes Inside of Components

P

Style the Active Angular Navigation Element with routerLinkActive

P

Lazy Load Angular Modules with the Router

P

Build Angular Navigation with routerLink

P

Map a Second Angular Route to a Component

P

Configure Your First Angular Route

Structure a Basic Angular 2 Application

P

Manipulate and Access DOM Elements with Angular 2 Renderer

P

Move and Delete Angular 2 Components After Creation

P

Set Properties on Dynamically Created Angular 2 Components

P

Style Angular 2 Components

P

Generate Angular 2 Components Programmatically with entryComponents

P

Share a Service Across Angular 2 Components and Modules

P

Create Shareable Angular 2 Components

P

Create Application-Specific Angular 2 Components

P

Isolate State Mutations in Angular Components

P

Use Dependency Injection with ES6 and Angular

P

Angular 2 - Building a Toggle Button Component

P

Using the Async Pipe in Angular 2

P

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

P

Organizing Angular 2 projects by feature

P

Filter items with a custom search Pipe in Angular 2

P

Build a select dropdown with *ngFor in Angular 2

P

Refactoring mutations to enforce immutable data in Angular 2

P

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)

P

Angular 2 - Custom Events (es5)

P

Angular 2 - Events (es5)

P

Angular 2 - Binding (es5)

P

Angular 2 - Hello World (es5)

P

Angular 2 - Hello World (es6)

P
angular tutorial about Implement Structural Directive Data Binding with Context in Angular

Implement Structural Directive Data Binding with Context in Angular

2:03 angular PRO

Just like in *ngFor, you're able to pass in data into your own structural directives. This is done by declaring the variable using a let statement then passing context into the createEmbeddedView call.

angular tutorial about Assign a Structual Directive a Dynamic Context in Angular

Assign a Structual Directive a Dynamic Context in Angular

3:01 angular PRO

Just like passing in an array to *ngFor, you can pass in any value into your structural directive so that it can render templates based on those values. It's crucial to understand how the *directive syntax expands into a <template> and adds a custom @Input based on the syntax you use so that you can use your own data.

angular tutorial about Create a Template Storage Service in Angular

Create a Template Storage Service in Angular

4:00 angular PRO

You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. You can store these TemplateRefs in a Service and then access them from any @Directive or @Component in your app.

angular tutorial about Combine HostBinding with Services in Angular Directives

Combine HostBinding with Services in Angular Directives

3:08 angular PRO

You can change behaviors of element and @Component properties based on services using @HostBinding in @Directives. This allows you to build @Directives which rely on services to change behavior without the @Component ever needing to know that the Service even exists.

angular tutorial about Write a Structural Directive in Angular

Write a Structural Directive in Angular

3:01 angular PRO

Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of <template> elements, but they're easy and extremely powerful once you undrestand the concepts.

angular tutorial about Use Template Elements in Angular

Use Template Elements in Angular

1:33 angular PRO

The <template> element is a core piece of building complex UI in Angular. You can get a reference to these elements, then pass them around and create new elements based on them.

angular tutorial about Create Elements from Template Elements with ngTemplateOutlet in Angular

Create Elements from Template Elements with ngTemplateOutlet in Angular

2:38 angular PRO

ngTemplateOutlet is a directive that simplifies creating elements from template elements. This allows you to create simple, reusable templates then generate elements with custom data whenever you need them.

angular tutorial about Build a Directive that Tracks User Events in a Service in Angular

Build a Directive that Tracks User Events in a Service in Angular

3:11 angular PRO

A @Directive is used to add behavior to elements and components in your application. This makes @Directives ideal for behaviors such as "tracking" which don't belong in a Component, but do belong as a behavior in your application.

angular tutorial about Handle Events with Angular Directives

Handle Events with Angular Directives

1:35 angular PRO

A @Directive can also listen to events on their host element using @HostListener. This allows you to add behaviors that react to user input and update or modify properties on the element without having to create a custom component.

angular tutorial about Add Inputs to Angular Directives

Add Inputs to Angular Directives

2:55 angular PRO

The @Input decorator allows you to pass values into your @Directive so that you can change the value of the Directive each time that it is used. Using @Input makes your Directives much more flexible and reusable so they can adapt to many different situations.

angular tutorial about Write an Angular Directive

Write an Angular Directive

1:42 angular

Angular Directives allow you manipulate elements by adding custom behaviors through attributes. This lesson covers how to create a Directive and attach its behavior to an element.

angular tutorial about Define Two-Way Transitions for Angular States

Define Two-Way Transitions for Angular States

1:53 angular PRO

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

angular tutorial about Animate Adding and Removing Angular Elements with ngIf

Animate Adding and Removing Angular Elements with ngIf

1:49 angular PRO

A common use-case for an Angular 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.

angular tutorial about Use Keyframes for Fine-Tuned Angular Animations

Use Keyframes for Fine-Tuned Angular Animations

2:15 angular PRO

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 animation you want.

angular tutorial about Delay and Ease Angular Animations

Delay and Ease Angular Animations

3:11 angular PRO

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.

angular tutorial about Animate Between Angular States Using Transitions

Animate Between Angular States Using Transitions

1:11 angular PRO

The foundation of animation in Angular 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.

angular tutorial about Control Undefined Angular States with void State

Control Undefined Angular States with void State

2:05 angular PRO

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

angular tutorial about Switch Between Angular States on a Trigger

Switch Between Angular States on a Trigger

1:04 angular

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.

angular tutorial about Define an Angular Trigger and State

Define an Angular Trigger and State

1:32 angular

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.

angular-cli tutorial about Generate components with the Angular CLI

Generate components with the Angular CLI

1:21 angular-cli PRO

Generating components with the Angular CLI allows for scaffolding applications quickly. Learn what will be generated for you and how to generate quickly with shortcuts in the desired directory.

angular tutorial about Install the Angular CLI to Create and Serve an Angular Application

Install the Angular CLI to Create and Serve an Angular Application

1:17 angular PRO

Getting started with angular development can be difficult, with a lot of moving parts. Allow the Angular CLI to handle those complexities so you can focus on creating great applications.

In this lesson you will learn how to install the Angular CLI from npm, create a new application, serve the new application in the browser and edit it with live-reload.

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 Pick Up Angular 2 in 6 Minutes

Pick Up Angular 2 in 6 Minutes

6:09 angular PRO

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.

angular tutorial about Check ngModel Validation in Angular 2

Check ngModel Validation in Angular 2

0:55 angular 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.

angular tutorial about Create a Basic Angular 2 ngModel Input

Create a Basic Angular 2 ngModel Input

1:39 angular

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.

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

Understand the Angular 2 States of Inputs: Pristine and Untouched

1:44 angular 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.

angular tutorial about Create Radio Buttons for Angular 2 Forms

Create Radio Buttons for Angular 2 Forms

5:48 angular 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.

angular tutorial about Build Select Dropdowns for Angular 2 Forms

Build Select Dropdowns for Angular 2 Forms

1:10 angular 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.

angular tutorial about Style Validation in Angular 2 Forms

Style Validation in Angular 2 Forms

1:11 angular 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.

angular tutorial about Display Validation and Error Messaging in Angular 2

Display Validation and Error Messaging in Angular 2

2:59 angular 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.

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

Create and Submit an Angular 2 Form using ngForm

2:41 angular 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.

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

Generate and Render Angular 2 Template Elements in a Component

1:25 angular 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.

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

Build fully reactive APIs in Angular 2 with Observables

1:58 angular PRO

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

angular tutorial about Prevent unnecessary requests in Angular 2 with distinctUntilChanged

Prevent unnecessary requests in Angular 2 with distinctUntilChanged

1:15 angular PRO

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

angular 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 angular PRO

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

angular tutorial about Combine Observables in Angular 2 with flatMap

Combine Observables in Angular 2 with flatMap

2:10 angular PRO

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

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

Debounce the user input in Angular 2 using debounceTime

1:25 angular PRO

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

angular tutorial about Consuming events as Observables in Angular 2

Consuming events as Observables in Angular 2

3:07 angular

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.

angular tutorial about Create an Angular 2 Hello World Component

Create an Angular 2 Hello World Component

2:32 angular

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.

angular tutorial about Load Data Based on Angular Route Params

Load Data Based on Angular Route Params

5:16 angular PRO

You can load resource based on the url using the a combination of ActivatedRoute and Angular’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.

angular tutorial about Load Data to Build Angular Navigation

Load Data to Build Angular Navigation

3:29 angular 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.

angular tutorial about Build Dynamic Angular Navigation with ngFor

Build Dynamic Angular Navigation with ngFor

1:49 angular 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’s *ngFor directive to build out navigation based on any set of data you provide with urls.

angular tutorial about Understand the Angular Base href Requirement

Understand the Angular Base href Requirement

3:48 angular 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.

angular tutorial about Use Params from Angular Routes Inside of Components

Use Params from Angular Routes Inside of Components

3:07 angular PRO

Angular’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.

angular tutorial about Style the Active Angular Navigation Element with routerLinkActive

Style the Active Angular Navigation Element with routerLinkActive

1:53 angular PRO

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

angular tutorial about Lazy Load Angular Modules with the Router

Lazy Load Angular Modules with the Router

5:15 angular PRO

Angular lazy loading is a core feature of Angular. 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’s module pattern so that files that belong to each module don’t get required by other modules.

angular tutorial about Build Angular Navigation with routerLink

Build Angular Navigation with routerLink

0:38 angular PRO

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

angular tutorial about Map a Second Angular Route to a Component

Map a Second Angular Route to a Component

0:49 angular PRO

Mapping Angular 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.

angular tutorial about Configure Your First Angular Route

Configure Your First Angular Route

3:31 angular

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

angular tutorial about Structure a Basic Angular 2 Application

Structure a Basic Angular 2 Application

1:16 angular 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.

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

Manipulate and Access DOM Elements with Angular 2 Renderer

3:46 angular 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.

angular tutorial about Move and Delete Angular 2 Components After Creation

Move and Delete Angular 2 Components After Creation

2:25 angular 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.

angular tutorial about Set Properties on Dynamically Created Angular 2 Components

Set Properties on Dynamically Created Angular 2 Components

1:47 angular 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.

angular tutorial about Style Angular 2 Components

Style Angular 2 Components

3:43 angular 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.

angular tutorial about Generate Angular 2 Components Programmatically with entryComponents

Generate Angular 2 Components Programmatically with entryComponents

4:12 angular 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.

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

Share a Service Across Angular 2 Components and Modules

2:51 angular 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.

angular tutorial about Create Shareable Angular 2 Components

Create Shareable Angular 2 Components

4:17 angular 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.

angular tutorial about Create Application-Specific Angular 2 Components

Create Application-Specific Angular 2 Components

2:51 angular 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 Isolate State Mutations in Angular Components

Isolate State Mutations in Angular Components

8:06 angularjs PRO

Managing state is one of the hardest things to do in any application. Angular 2 tackles this problem by making it easy to implement a reactive, uni-directional data flow that favor immutable operations. We are moving in the right direction in Angular 1 by moving our state and logic to models but invariably this raises a question. If we are moving to an immutable world, how do you manage mutable operations like forms in Angular? In this lesson, we are going to learn a surprisingly simple technique to isolate state mutations within a component using component lifecycle hooks.

angularjs tutorial about Use Dependency Injection with ES6 and Angular

Use Dependency Injection with ES6 and Angular

3:09 angularjs PRO

In this lesson, we are going to talk about dependency injection in an Angular application in ES6. There is a gotcha that I want to point out that most people will run into especially if they have not spent a lot of time using a classical language. We will start with a contrived example and then anchor it back into our application when we modify our CategoriesModel to use the $q service to return a promise.

angular tutorial about Angular 2 - Building a Toggle Button Component

Angular 2 - Building a Toggle Button Component

7:28 angular 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.

angular tutorial about Using the Async Pipe in Angular 2

Using the Async Pipe in Angular 2

5:27 angular PRO

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!

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

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

4:33 angular PRO

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.

angular tutorial about Organizing Angular 2 projects by feature

Organizing Angular 2 projects by feature

2:23 angular PRO

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

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

Filter items with a custom search Pipe in Angular 2

3:15 angular PRO

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.

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

Build a select dropdown with *ngFor in Angular 2

4:21 angular PRO

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

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

Refactoring mutations to enforce immutable data in Angular 2

4:16 angular PRO

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.

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 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 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 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 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 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 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 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 Property Binding with Angular 2 and TypeScript

Property Binding with Angular 2 and TypeScript

3:05 angular 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.

angular tutorial about Event Binding with Angular 2 and TypeScript

Event Binding with Angular 2 and TypeScript

2:49 angular 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.

angular tutorial about Angular 2 - First Directive (es5)

Angular 2 - First Directive (es5)

2:24 angular PRO

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.

angular tutorial about Angular 2 - Custom Events (es5)

Angular 2 - Custom Events (es5)

4:54 angular PRO

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.

angular tutorial about Angular 2 - Events (es5)

Angular 2 - Events (es5)

3:38 angular PRO

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.

angular tutorial about Angular 2 - Binding (es5)

Angular 2 - Binding (es5)

3:01 angular PRO

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.

angular tutorial about Angular 2 - Hello World (es5)

Angular 2 - Hello World (es5)

3:11 angular PRO

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.

angular tutorial about Angular 2 - Hello World (es6)

Angular 2 - Hello World (es6)

2:57 angular 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.

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