Directives In Angular 5

Directives

In this article, I am going to explain DIRECTIVES. Basically, directives are used to extend the power of the HTML attributes and to give shape and reshape to the DOM’s structure.

Angular supports 3 types of directives.

Component Directive

• The directive with templates. This is the special directive which is always present in an Angular application. Each of our HTML page associated with this directive.
  
  
• Component Directive is nothing but a class with @Component decorator function. As we know Angular application contains at least one component called “AppComponent” which present inside “App-compoennt.ts” file. In this file, we see @Component (a decorator function) which is used to create a component directive with the help of selector.
  
  
• Even if we create our own component then we will be using this decorator function and creating a component directive. Without using “selector” property it is not possible to render our template, so we can say that with the help of this property we will create a component directive.

Example of Component Directive

Create a new project, called “SampleDirectives” with the following commands :

ng new SampleDirectives

Now, go “app.component.ts” file, we can see the below code,

In the above line of code, Angular used @Component, a decorator function to create a template directive called “app-root”. We can use this directive on index page like this :

Structural Directive

Structural directive modifies the structure of DOM by adding or removing DOM elements. We can say that basically it can work on the structure of a DOM. Angular provides several structural directives. Let’s understand these structural directives :

*ngIf

There are lots of conditions where we need to display data on the basis of certain condition. At that time ngIf is useful.

It directly works on DOM elements, that is this directive that hides or remove certain parts (on which we implemented this) from the DOM. Let’s understand with an example

First, we created a component called “ngif-directive.component.ts” file and wrote the below code

In the next step, we created an HTML page called “ngif-directive.html” and wrote the below code

After that we call it in into “app.component.html” file like this:

See the output, we are able to see both the pictures. Now, if we want to hide/show picture on the basis of contract type then use both *ngIf, use *ngIf in both the div like

Replace first line of first div with the below line

and replace first line of the second div with the below line

Save it, run it and see the output

I hope you can understand the *ngIf directive. It removes the whole element from the DOM if the condition is false.

Angular provides a better way to write the same code with the help of “then” and “else” keyword. But for this, we need to use “<ng-template>” with template reference variable like

Put <ng-template> tag above both the div, like

Now, create one div with *ngIf like

Here, in the above lines, if typeOfEmployee is ‘permanent’ then it will execute “then” part and according to that search for “permanent” (template variable) and render (display) ng-template having permanent variable, otherwise, it will execute “else” part and search for “contractual” and render (display) ng-template with contractual variable.

If we run the above code then the output will be the same as well as it also adds or removes from DOM.

Hidden Property

We can also achieve the same thing with the help of “hidden” properties. Like this:

Replace first line of first div with the below line

and replace first line of the second div with the below line

Here, in the above lines, due to “hidden” property if “typeOfEmployee” is permanent then it will hide first div, otherwise it will hide the second div. Now, as per our code, typeOfEmployee is “permanent”, so, hidden property hides the first picture and shows the second one. Look at the output

The basic difference between “hidden” and “ngIf” is that ngIf adds or removes an element from DOM, however, hidden can only show or hide it, not remove it from the DOM.

ngSwitchCase

NgSwitchCase is a structural directive which depends on an expression. When we have a set of many elements and we want to display only one on the basis of certain condition then we used ngSwitch.

To implement ngSwitch, we basically used 3 keywords,

For example, write the below lines in “ngif-directive.html” file,