Understand Angular 2 Directives in Depth

Angular 2 Directives allow you to add custom behavior to elements and components. Rather than creating a hierarchy of components to try to "extend" behavior, Angular 2 Directives enable you to compose behaviors on to your components. This includes adding event listeners that hook into services, manipulating templates, and adding more configuration to basic elements. This course helps you understand the concepts around building our Angular 2 directives and provides examples from basic directives that inspect elements to advanced structural directives that completely re-write templates.
If Angular 2 is new and the syntax foreign, you will want to check out Get Started with Angular 2 and Building Angular 2 Components.

Watch User Created Playlist (11)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Write an Angular Directive

Add Inputs to Angular Directives

P

Handle Events with Angular Directives

P

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

P

Combine HostBinding with Services in Angular Directives

P

Use Template Elements in Angular

P

Create Elements from Template Elements with ngTemplateOutlet in Angular

P

Write a Structural Directive in Angular

P

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

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