Understand Angular 2 Directives in Depth

28 minutes

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.

pro-course-rss-logo

PRO RSS Feed

Write an Angular 2 Directive

Add Inputs to Angular 2 Directives

P

Handle Events with Angular 2 Directives

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

P

Combine HostBinding with Services in Angular 2 Directives

P

Use Template Elements in Angular 2

P

Create Elements from Template Elements with ngTemplateOutlet in Angular 2

P

Write a Structural Directive in Angular 2

Implement Structural Directive Data Binding with Context in Angular 2

Assign a Structual Directive a Dynamic Context in Angular 2

Create a Template Storage Service in Angular 2

angular2 tutorial about Write an Angular 2 Directive

Write an Angular 2 Directive

1:42 angular2

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

angular2 tutorial about Add Inputs to Angular 2 Directives

Add Inputs to Angular 2 Directives

2:55 angular2 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.

angular2 tutorial about Handle Events with Angular 2 Directives

Handle Events with Angular 2 Directives

1:35 angular2

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.

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

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

3:11 angular2 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.

angular2 tutorial about Combine HostBinding with Services in Angular 2 Directives

Combine HostBinding with Services in Angular 2 Directives

3:08 angular2 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.

angular2 tutorial about Use Template Elements in Angular 2

Use Template Elements in Angular 2

1:33 angular2 PRO

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

angular2 tutorial about Create Elements from Template Elements with ngTemplateOutlet in Angular 2

Create Elements from Template Elements with ngTemplateOutlet in Angular 2

2:38 angular2 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.

angular2 tutorial about Write a Structural Directive in Angular 2

Write a Structural Directive in Angular 2

3:01 angular2

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.

angular2 tutorial about Implement Structural Directive Data Binding with Context in Angular 2

Implement Structural Directive Data Binding with Context in Angular 2

2:03 angular2

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.

angular2 tutorial about Assign a Structual Directive a Dynamic Context in Angular 2

Assign a Structual Directive a Dynamic Context in Angular 2

3:01 angular2

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.

angular2 tutorial about Create a Template Storage Service in Angular 2

Create a Template Storage Service in Angular 2

4:00 angular2

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.

Presented by:

John Lindquist

John Lindquist is a co-founder of egghead.io

John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.

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