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.

Write an Angular Directive

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.

Add Inputs to Angular Directives

2:55 angularPRO

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.

Handle Events with Angular Directives

1:35 angularPRO

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.

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

3:11 angularPRO

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.

Combine HostBinding with Services in Angular Directives

3:08 angularPRO

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.

Use Template Elements in Angular

1:33 angularPRO

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.

Create Elements from Template Elements with ngTemplateOutlet in Angular

2:38 angularPRO

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.

Write a Structural Directive in Angular

3:01 angularPRO

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.

Implement Structural Directive Data Binding with Context in Angular

2:03 angularPRO

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.

Assign a Structual Directive a Dynamic Context in Angular

3:01 angularPRO

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.

Create a Template Storage Service in Angular

4:00 angularPRO

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.