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.
|
1 2 3 |
<div *ngIf="condition"> <p> This is a structural directive example</p> </div> |
And in the app.component.ts don’t forget to add the variable.
|
1 2 3 4 5 6 7 8 9 10 11 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; condition: boolean = true; } |
Now if you run the code you would see that the below screen.
Make a change in the app.component.html as shown below.
|
1 2 3 |
<div *ngIf="!condition"> <p> This is a structural directive example</p> </div> |
Now that the ngIf evaluates to false you can see that the <div> is not added to the DOM as shown below.
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
|
1 2 3 |
<div [hidden]="condition"> <p> This is a structural directive example</p> </div> |
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; condition: boolean = true; usernames =[{ name: 'raja', status: 'active' }, { name: 'david', status: 'inactive' }, { name: 'vince', status: 'active' }]; } |
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)
|
1 |
ng generate directive mydirective |
This will generate a mydirective.directive.ts file.
Open this up and modify the code inside it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core'; @Directive({ selector: '[appMydirective]' }) export class MydirectiveDirective { constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { } @Input() set appMydirective(user) { if(user.status == 'active') { this.viewContainer.createEmbeddedView(this.templateRef); } } } |
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.
|
1 2 3 4 5 |
<div *ngFor="let item of usernames"> <div *appMydirective="item"> {{item.name}} </div> </div> |
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 
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.. 
