Directives in Angular

Hey Guys! What's up? Doing well? This is the next article I'm bringing you on the basic concepts of Angular JS framework! So far, I have explained the way to create a project, work with components, install Bootstrap into a project and data binding.. So, I decided to explain another key concept called Directives in Angular.

What are Directives?

As you know, Angular templates are dynamic. They always change with user interaction. Whenever they are rendered in the web browser, DOM elements and tree get changed according to the instructions given by the directives. Simply, Directives manipulate the DOM.

Types of Directives

1. Components

Components are also considered as a directive having a template. There's a view associated with a component. As I mentioned in a previous article, Component is with the business logic + template.. When the component is rendered in your browser, all the elements in the template are added to the DOM tree.

2. Structural Directives

These are the directives responsible to change the structure or the layout of the DOM. They can add/ remove/ replace DOM elements

3. Attribute Directives

These directives allows us to change the appearance or the behavior of the DOM elements. As example, if you want to change the color of a line, we can call a directive.

Let's Start!

Make a new component to try out these directives...
ng g c directive-test

Now include this component in the app.component.html file using its selector tag.
<app-directive-test></app-directive-test>

Output :

Structural Directives

These Directives have a * sign before the directive.
Examples :  *ngFor , *ngIf , *ngSwitch

ngFor Directive

For this, we have to define an object array in the TypeScript file. Then we can loop the array in the relevant HTML file, directive-test.component.html..

directive-test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-directive-test',
  templateUrl: './directive-test.component.html',
  styleUrls: ['./directive-test.component.css']
})
export class DirectiveTestComponent implements OnInit {
  users: any[] = [
    {
      'id': 1,
      'name': 'salitha',
      'job': 'Web Developer'
    },
    {
      'id': 2,
      'name': 'chathuranga',
      'job': 'UI Designer'
    },
    {
      'id': 3,
      'name': 'techpool',
      'job': 'Blogger'
    }
  ];
  constructor() { }

  ngOnInit() {
  }
}

directive-test.component.html

<div class="container">
  <div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-6">
      <table class="table table-bordered">
        <thead>
          <th>ID</th>
          <th>Name</th>
          <th>Job</th>
        </thead>
        <tbody>
          <tr *ngFor="let item of users">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.job }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-lg-3"></div>
  </div>

</div>

output:

ngIf Directive

We can use this directive to check a condition and display the DOM elements according to the evaluation of the directive. 

As an example, here I'm going to check the users array is empty or not.. If it's empty, "No Users" will be displayed. If array is having something, List of users will be rendered in the browser.

      <div *ngIf="users.length > 0; then usersList else noUsers">

      </div>
      <ng-template #usersList>
        <h3>List of Users</h3><br>
      </ng-template>
      <ng-template #noUsers>
        No Users
      </ng-template>

This code renders the ng-template called noUsers, if the users array is empty (users.length < 0) and if array is not empty, the id with usersList template is rendered. Now you can include the users table code into the #usersList template, to view the list of users.
Try with an empty array! Then browser will show you No Users.

Attribute Directives

Attribute directives deal with changing the look and behavior of the DOM element. These changes are done dynamically. If you want you can create your own directives.

Examples :  ngStyle, ngClass, ngModel

Now I will explain you one of these directives..Let's consider ngStyle..

I'm going apply a CSS style to a sentence when a button is clicked..

Open test-directive.component.ts file and declare a style array as empty..

Then define a function to set styles. Include the styles within the function body..

  currentStyle: {};

  setStyle() {
    this.currentStyle = {
      'font-weight': 'bold',
      'color': 'red',
      'font-size': '30px'
    };
  }

Then go into HTML file. Include the sentence that you are going to apply the css dynamically.

  <h3 [ngStyle]="currentStyle">Change My Style</h3><br>
  <button class="btn btn-danger btn-sm" (click)="setStyle()">CHANGE</button>

Output :

Click on CHANGE button and see what is happening! Sentence will be bold and in red color after clicking.

Ok guys! Now you have a basic understanding about Angular Directives. This is not all the stuff on directives..I wanted to give the basic idea..Try more with Angular applications..

Good Luck!