Angular 2 – Structural Directives

Hi Friends,

Hope you are all well. In this post let’s talk about structural directives and how to create one of them.

Now, that I have used the term structural directives rather than simply mentioning it as directives you might wonder about the other kinds of directives as well. Well there are three of them namely components, attribute directives and structural directives.

Components are simply directives with templates and they are most commonly used in your application. Attribute directives are those that are used to change appearance of an element. Structural directives can be used to modify the DOM by adding and removing DOM elements and hence can be useful in several scenarios.

The best examples for structural directives are ngIf, ngFor and ngSwitch. Let’s take one of these as example.

A screencast of this post.

 

The complete code in this post can be found here.

First, I have created a new angular 2 application using the angular-cli and added the below code in app.component.html.

And in the app.component.ts don’t forget to add the variable.

Now if you run the code you would see that the below screen.

structural1

Make a change in the app.component.html as shown below.

Now that the ngIf evaluates to false you can see that the <div> is not added to the DOM as shown below.

structural2

You might wonder what’s the big deal? We could achieve the same thing with hidden property right ? Well, if you use hidden as shown below

Now even though the div is hidden due to the condition being true, the code is still pushed to the DOM and just hidden from view as shown below.

structural4

So, structural directives allow us to add remove elements on the DOM in an effective way. Now let’s see how to create one of them.

Get into app.component.ts and modify it as shown below.

 

Now assume that usernames is an array returned from some http call and it contains a list of users. You need to display the names of the users that are currently active.

Let’s write a custom directive to do that.

Open up your terminal again and give the below command (If you are using angular-cli)

This will generate a mydirective.directive.ts file.

Open this up and modify the code inside it as shown below.

The code is pretty much self-explanatory. As you can see I am just getting a user from the usernames array and then checking if the status is active, if yes then the whole <div> is pushed onto the DOM.

Open up app.component.html and add the below code.

Now you could see our directive in action and what we are passing as input right..?

If you run this code you would see a screen as shown below.

As you can see structural5

As you can see only the names raja and vince are getting displayed but the name david is omitted since his status is inactive.

But if you take a look at the code you would notice that the inner <div> segment when the item is the second element in the array i.e., david is absent. Our structural directive is working perfectly and the code for only Raja and Vince is pushed onto the DOM.

So, there. That’s how you could create your own structural directive and use it in your apps. Hope this helped you guys. If you found this helpful kindly share it with someone else and help them too.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!