Word Direcitve means something that serves to direct or guide towards an action or goal. The purpose of Directives is similar in Angular too. Directives are basically markers for DOM elements and are used to either create new HTML elements or extend behavior of already present elements.
There are three types of Directives
There are three types of Directives
- Component Directive
- Strucutral Directive
- Attribute Directive
To create a directive in Angular2, you have to follow these steps
- Create a regular javascript class and decorate it with @Directive decorator
import {Directive} from '@angular/core'; @Directive({ selector: "[disableOnClick]", }) class DisableOnClick { @HostListener('click', ['$event.target']) onClick(element) { element.disabled= "disabled" } }
- Declare it in your module declaraion file e.g app.module.ts
import { NgModule } from '@angular/core'; import { DisbaleOnClick } from './components/disableOnClick.directive' @NgModule({ declarations: [DisableOnClick] }) class AppModule{ }
- Use it anywhere in your HTML
<button disableOnClick > Disable Me </button>
Now lets talk about three types of directives.
Component
Components basically extend your applications HTML vocabulary by creating new reusable elements throughout the application
Structural Directive
These directives shape your application's DOM structure by adding, removing or manipulating elements. There are number of structural directives provided by angular's rich library of items. They are easy to recognize as you will see an * in front of the name for example *ngFor, *ngIf
ngIf is a condition which add the elements into DOM when a specific condition is met.
ngFor provides iteration right into your HTML template and tell angular to add elements for the given number of times.
Other examples are *ngSwtich
Another important point to note about structural directives is that angular internally translates them into an ng-template directive and replaces the host element with ng-template.
Also remember you cannot put more then one sturctural directives on one host element, e.g you cannot have ngFor and ngIf both on the same host element.
Another important point to note about structural directives is that angular internally translates them into an ng-template directive and replaces the host element with ng-template.
Also remember you cannot put more then one sturctural directives on one host element, e.g you cannot have ngFor and ngIf both on the same host element.
Attribute Directive
Attribute Directive alters the appearance or behavior of an existing elements by extending their attribute set. NgStyle and NgModel are the most commonly used attribute directives. The example source code above also creates an attribute directive.
Comments
Post a Comment