AppDividend
Latest Code Tutorials

Angular Directive Example Tutorial

567

Get real time updates directly on you device, subscribe now.

Angular Directive Example Tutorial is today’s leading topic.  Angular Directive is a class with a @Directive decorator. Decorators are the functions that modify JavaScript classes. The decorators are used for attaching metadata to classes as it knows the configuration of those classes and how they should work. You will be surprised to know that the component is also a directive-with-a-template. The @Component decorator is a @Directive decorator extended with template-oriented features.

Earn a Tech Degree and get the skills like Frontend Development or Javascript Development that can help you to launch a career. Join the program

Angular Directive Example Tutorial

An Angular Directive can be divided into two types: 

  1. Components
  2. Structural
  3. Attribute

#Structural Directives

Structural directives reconstruct the layout by adding, removing, and replacing elements in DOM. The structural directives are responsible for shape or reshape the DOM’s structure, typically by adding, deleting, or modifying elements. Similar to the other directives, you apply the structural directive to a host element. The directive then performs whatever it is intended to do with that host element. The structural directives are very simple to recognize. An asterisk (*) precedes the directive attribute name. It does not require brackets or parentheses like attribute directive.

Let us take an example. Generally, we loop through a data from the backend and display inside the table. It is the general case scenario in the web application. At that time, we use the *ngFor directive to loop through the data.

<table class="table table-hover">
  <thead>
  <tr>
      <td>Ad Unit Name</td>
      <td>Ad Unit Price</td>
      <td colspan="2">Actions</td>
  </tr>
  </thead>

  <tbody>
      <tr *ngFor="let adunit of adunits">
          <td>{{ adunit.unit_name }}</td>
          <td>{{ adunit.unit_price }}</td>
      </tr>
  </tbody>
</table>

So, in the above example, we have loop through the ad units and display the ad unit one by one. Three of the standard, built-in structural directives are NgIf, NgFor, and NgSwitch. The Directives can be written in both the UpperCamelCase and lowerCamelCase because NgIf refers to a directive class & ngIf refers to a directive’s attribute name.

#Attribute Directives

An Attribute directive changes the appearance or behavior of a Document Object Model(DOM) element. The attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax guide, for example, can change several element styles at the same time.

You can generate the attribute directive using the following command.

ng g directive directive_name

Directives must be declared in Angular Modules in the same manner as components.

#Example

Install Angular using Angular CLI. First, create an angular project using the following command.

ng new directive

Now, go inside the folder.

cd directive

Generate Angular Directive using the following command.

ng g directive active

The generated src/app/active.directive.ts is as follows:

// active.directive.ts

import { Directive } from '@angular/core';

@Directive({
  selector: '[appActive]'
})
export class ActiveDirective {

  constructor() { }

}

The imported Directive symbol provides the Angular the @Directive decorator.

The @Directive decorator’s lone configuration property specifies the directive’s CSS attribute selector [appActive].

It is the brackets ([]) that make it an attribute selector. Angular locate each element in the template that has an attribute named appActive and applies the logic of this directive to that element.

The attribute selector pattern explains the name of this kind of directive.

Now, define the behavior of the directive. So we need to add code inside the constructor of an ActiveDirective class.

// active.directive.ts

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appActive]'
})
export class ActiveDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'Green';
  }

}

Now, we can use the directive inside our HTML component. Write the following code in an app.component.html file.

Related Posts
1 of 16
<!-- app.component.html -->

<p appActive>Active !!</p>

Save the file and start the development server.

ng serve --open

 

Angular Directive Example Tutorial

You can see that; we got the green background color of the text. Which is cool because we have first created the custom directive and add that directive to our HTML element.

Here, we have modified the DOM through the angular directive. We have changed the color of p element through angular attribute directive.

Finally, Angular Directive Example Tutorial is over. Thanks for taking.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.