Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Write a Structural Directive in Angular 2

3:01 Angular 2 lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

A structural directive deals heavily with templates, let's create one from scratch just to show what's going on. We'll have a selector of an attribute of three, export a class called "ThreeDirective." Add that to our declarations.

Add the ThreeDirective to our h1 here, I'll say "three." Then, we'll get a bit of info off of it by saying "constructor." We want to inject the element ref so we can see what element this is on. We actually, instead of just the "ElementRef," we want to see the native element itself, the actual element on the DOM.

When I render this out and do this, you see it logs out this actual element just as if you'd selected it and added it to the console. The native element itself is this rendered out element from the template.

For a structural directive, we're going to add in an asterisk. When I hit "Save," you'll see something much different, because you'll see nothing on the DOM now. You'll see "template bindings" is what's logged out as the native element.

Essentially, what's happened is that instead of three like this, adding the asterisk wraps you element in a template. I'll bring this up, and then adds "three" here. If I hit "Save," now, this will accomplish the exact same thing.

You'll see we'll get the template bindings comment. But the asterisk version of a directive is essentially the shorthand for wrapping something in a template element, which will allow us to use this as a template inside of our directive.

To use that element, I'm going to inject a couple things, point to inject the "ViewContainerRef." Because it's on a template, remember what this looked like when we wrapped it with the template so this is actually a directive on a template, we can inject the template, as well. This just requires a generic of "any."

From here with these two pieces with the view container and a template, if I just use a lifecycle hook like "ngAfterViewInit" to say "this.view.createEmbeddedView(this.template)." Then do that three times.

When I hit "Save," I'll now have three "Hello, Angulars" on the page, because I used my "*three" directive.

Remember, that surrounded this with the template. Now, I have this template to pass around where it's been passed into my directive. I can just use my ViewContainerRef to create those embedded views using my template and stamp out as many as I need.

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