Directives in Angular 2

This is a quick post about creating directives. This post assumes you know the basics of Angular 2, if not go give the Getting Started Guide up on angular.io a read.

Directives are components without templates.

Directives, in TypeScript are created by decorating a class with the @Directive decorator:

@Directive({
    selector: 'my-directive'
})
export class MyDirective {}  

To demonstrate how to create a directive we are going to build a directive for a very common use case - a directive that will hide a particular element if a user does not have the necessary permission. This directive will let you hide either your navigation routes or buttons or any other element for that matter if a user is not supposed to see it.
Note: This should not be your only security strategy. If you didn't already know, Javascript can be easily modified to show these elements

In the following bit of HTML, we see how our new directive will be used to hide certain routes if the user does not have the required permissions

<ul>  
     <nav>
        <a [hasPermission]="'ViewCompA'" [routerLink]="['CompA']">Component A</a>
        <a [hasPermission]="'ViewCompB'" [routerLink]="['CompB']">Component B</a>
        <a [hasPermission]="'ViewCompC'" [routerLink]="['CompC']">Component C</a>
    </nav>
    <router-outlet></router-outlet>
</ul>  

The hasPermission directive gets passed a particular permission - if the user has that particular permission, the element is displayed, if not it is removed. Here is all of our directive code:

import {Directive, ElementRef, Input, OnInit} from 'angular2/core';

@Directive({
    selector: '[hasPermission]'
})
export class HasPermissionDirective implements OnInit{  
   @Input('hasPermission') permission: string;
   perms:[string] = ['ViewCompA', 'ViewCompC'];

   constructor(private _el: ElementRef) { }

   ngOnInit() {
     if(this.perms.indexOf(this.permission) === -1) {
       this._el.nativeElement.style.display = 'none';
     }
   }
}

We decorate our class with @Decorator and set the selector as hasPermission which needs to be an attribute ([..]). The permission to be checked for is passed into the directive via @Input.

For this tutorial, we are using a very primitive way of storing permissions but in a real world scenario, you could see the list of permissions coming down from the server.

If the user has the particular permission, nothing really happens. But if the user does not have the necessary permission, the display property of that element is set to none. To get a hold of the element to set it's display property, we inject the ElementRef into our constructor and after the directive has been initialized - via the ngOnInit lifecycle hook, we check if the permission that was passed in exists in the user's permission list, if it does not, then hide the element. And that's it.

You can find a working Plnkr here

The app in the plunk has three routes but the user has permissions to only see Component A and Component C. Adding the third permission to the permission list will cause Component B to show up as well.