Directives in AJS

Definition of Directives in AJS

• In Angular, directives are a powerful feature that allows developers to extend HTML functionality and add behavior to elements with custom attributes, elements, and structural behavior. 

Characteristics of Directives in AJS

• Directives enable developers to create reusable components, add behavior to elements, and manipulate the DOM (Document Object Model) dynamically.
• Directives enable developers to create reusable components that encapsulate HTML, CSS, and behavior into self-contained building blocks.
• They enable developers to create reusable components, modify the appearance or behavior of HTML elements, and manipulate the structure of the DOM dynamically based on conditions.

Types of  Directives in AJS

There are three types of directives in Angular:-

• Component Directives:
  • Components are the most common type of directive in Angular.
  • They are commonly used to create custom elements with their own templates and logic to define a view.
  • Components encapsulate HTML, CSS, and behavior into reusable building blocks, making it easier to create modular and maintainable applications.
  • Components are declared using the @Component decorator in Angular.
• Attribute Directives:
  • Attribute directives allow developers to modify the appearance or behavior of HTML elements by binding behavior to HTML/DOM elements by applying custom attributes to them.
  •  They are used to modify the appearance, behavior, or structure of elements by adding, removing, or manipulating custom attributes dynamically.
  • Attribute directives are declared using the @Directive decorator in Angular.
• Structural Directives:
  • Structural directives modify the structure of the DOM by adding, removing, or manipulating elements based on conditionals.
  • They are used to add or remove elements from the DOM based on certain conditions.
  • Structural directives are prefixed with an asterisk (*) in Angular.
• Event Handling Directives:
  • Event Handling directives allow us to bind functions or expressions to DOM events and handle user interactions effectively.
  • In AngularJS (Angular 1.x), event handling can be accomplished using built-in directives such as ngClick, ngdbclick, ngSubmit, ngChange, ngmousemove, ngmousover, ngfocus, ngblur, ngselected, ngchecked, ngkeydown, ngkeyup, ngkeypress etc. 
• Custom Directives:
  • In AngularJS (Angular 1.x), custom directives allow us to extend the functionality of HTML by creating reusable components, attributes, or behaviors.
  • Custom directives are one of the core features of AngularJS and provide a powerful way to encapsulate UI logic and reuse it throughout our application at needed place.
  • There are three types of custom directives in AngularJS:-
    • Element Directives:
      • Element directives create custom HTML elements that encapsulate a specific behavior or functionality.
      • They are defined using the directive function and can be used as standalone components but use the restrict: 'E' option.
      • It has three options – Restrict, Template and Link.
      • For example –    

• • • Attribute Directives:
      • Attribute directives modify the behavior or appearance of existing HTML elements by adding custom attributes.
      • They are defined similarly to element directives but use the restrict: 'A' option.
    • Class Directives:
      • Class directives apply behavior or styles to elements based on the presence of a specific CSS class.
      • They use the restrict: 'C' option.

Built-in Directives(AngularJS)

• Angular provides several built-in directives that developers can use out-of-the-box to extend HTML functionality, manipulate the DOM, and add behavior to elements.
• They provide powerful functionality for dynamic and interactive templating, enabling developers to create rich and responsive web applications with Angular.
• Each directive offers powerful functionality to simplify common tasks in Angular development and enhance the interactivity and dynamic behavior of Angular applications.
• The prefix ng used in the directives name stands for “Angular“.
• Some of the most commonly used built-in directives in Angular are:-
  • ngApp/ng-app:
    • This directive defines the root element in an application.
    • In other words, this directive starts an AngularJS Application.
    • Syntax:

<div ng-app = "">
   ...
</div> 

• • ngBlur/ng-blur:
    • This directive defines a behavior on blur events.
  • ngBind/ng-bind:
    • This directive binds the content of an HTML element/tags to application data.
  • ngChange/ng-change:
    • This directive is used when content is being changed by the user randomly.
  • ngChecked/ng-checked:
    • This directive specifies if an element is checked or not.
  • ngClass/ng-class:
    • The ngClass directive dynamically adds or removes CSS classes to elements based on conditions or expressions.
    • It is commonly used for the conditional styling of elements.
  • ngClick/ng-click:
    • This directive specifies when an element is being clicked.
  • ngCloak/ng-cloak:
    • This directive prevents flickering when the application is being loaded.
  • ng-container:
    • The ng-container directive is a placeholder element that does not render any HTML output.
    • It is commonly used for structural directives or template manipulation without introducing additional DOM elements.
  • ngDbclick/ng-dbclick:
    • This directive specifies a behavior on double-click events.
  • ngDisabled/ng-disabled:
    • This directive specifies the disable attribute of an element.
  • ngFor/ng-for:
    • The ngFor directive iterates over a collection and generates HTML elements for each item in the collection.
    • It is commonly used for rendering lists or repeating elements.
  • ngFocus/ng-focus:
    • This directive specifies a behavior on focus events.
  • ngForm/ng-form:
    • The ngForm directive creates a form instance and provides form-related directives, such as ngModel and ngSubmit, for handling form input and submission.
  • ngHide/ng-hide:
    • It hides HTML elements in an application.
  • ngHref/ng-href:
    • This directive specifies a URL or link for the <a> element.
  • ngIf/ng-if:
    • The ngIf directive conditionally adds or removes elements from the DOM based on a specified expression.
    • It is commonly used for the conditional rendering of elements.
    • It removes the html element if a condition is false.
  • ngInclude/ng-include:
    • This directive helps in including HTML in an application.
  • ngInit/ng-init: 
    • This directive helps in defining certain initial values for an application data.
    • It is used to assign values to the variables.
  • ngJq/ng-Jq:
    • This directive specifies that the application must use a library, like jQuery.
  • ngKeydown/ng-keydown:
    • This directive specifies a behavior on keydown events.
  • ngKeypress/ng-keypress:
    • This directive specifies a behavior on keypress events.
  • ngKeyup/ng-keyup:
    • This directive specifies a behavior on key up events.
  • ngModel/ng-model:
    • The ngModel directive enables two-way data binding between form controls and model data.
    • It is commonly used for form handling and data synchronization.
    • This directive defines the model i.e., variable to be used in AngularJS.
    • Syntax:

<div ng-app = "">
   ...
   <p>Enter User Name: <input type = "text" ng-model = "name"></p>
</div>

• • ngMousedown/ng-mousedown:
    • This directive specifies a behavior on mouse down events.
  • ngMouseenter/ng-mouseenter:
    • This directive specifies a behavior on mouse enter events.
  • ngMouseleave/ng-mouseleave:
    • This directive specifies a behavior on mouse leave events
  • ngMousemove/ng-mousemove:
    • This directive specifies a behavior on mouse move events
  • ngMouseover/ng-mouseover:
    • This directive specifies a behavior on mouseover events
  • ngMouseup/ng-mouseup:
    • This directive specifies a behavior on mouse up events
  • ngoptions:
    • It specifies <options> in a <select> list.
  • ngReadonly/ng-readonly:
    • This directive specifies the read-only attribute of an element.
  • ngRequired/ng-required:
    • This directive specifies the required/compulsory attribute of an element.
  • ngRepeat/ng-repeat:
    • This directive defines a template for each data in a collection.
    • This directive helpls in  repeating HTML elements for each item in a collection
  • ngSelected/ng-selected:
    • This directive specifies the selected attribute of an element.
  • ngShow/ng-show:
    • This directive shows HTML elements in an application.
  • ngSrc/ng-src:
    • This directive specifies the source attribute for the <img> element.
  • ngStyle/ng-style:
    • The ngStyle directive dynamically applies CSS styles to elements based on conditions or expressions.
    • It is commonly used for dynamic styling of elements.
  • ngSubmit/ng-submit:
    • This directive executes to run on onsubmit events.
  • ngValue/ng-value:
    • This directive specifies the value of an input element.
  • ngSwitch/ng-switch:
    • The ngSwitch directive conditionally renders elements based on a specified expression, similar to a switch statement in other programming languages.
  • ngTemplateOutlet:
    • The ngTemplateOutlet directive dynamically renders a template based on a specified template reference.
    • It is commonly used for template composition and reusability.