Angular Directives: Guiding the DOM with Instructions

Directives:

#

Directives are instructional elements within the DOM. - Example: Components themselves are a type of directive.

In Angular, directives can be broadly categorized into three main types:

1. Component Directives:
   • Components are directives that encapsulate templates, styles, and behavior. They represent reusable building blocks for the user interface.
2. Attribute Directives:
   • Attribute directives modify the appearance or behavior of a DOM element. They are applied to elements as attributes, acting as decorators for the element.
3. Structural Directives:
   • Structural directives alter the structure of the DOM by conditionally adding, removing, or manipulating elements. They are identified by an asterisk (*) in the HTML syntax and are used for conditional rendering or structural transformations.

ngIf:

#

• ngIf is a structural directive, dynamically adding or excluding code from the HTML based on a condition.
• Example 1:

  <p *ngIf="serverCreated">{{ serverName}}</p>
  

• ngIf can also function as an If statement, requiring a true or false value.
• Example 2: if-else structure

  <p *ngIf="serverCreated; else noServer">{{ serverName}}</p>
  <ng-template #noServer>
    <p>No Server</p>
  </ng-template>
  

  Note:<ng-template> is a directive in Angular, used to mark places in the DOM for dynamic code insertion.

ngFor:

#

• ngFor is as a Structural Directive, dynamically repeating HTML elements based on an iterable, typically an array.
• It iterates through an array, creating HTML elements for each record, allowing for dynamic content generation.
• Example:

  <p *ngFor="let n of arr">{{ n }}</p>
  

• In this context, arr serves as an array of data that ngFor iterates through, dynamically rendering HTML elements based on the content of the array.

ngSwitch:

#

• ngSwitch is a Structural Directive that allows for conditional rendering based on a specified expression.
• It serves as an alternative to a series of ngIf statements, providing a cleaner and more concise way to handle multiple conditions.
• Example:

  <div [ngSwitch]="condition">   
  <p *ngSwitchCase="'case1'">Content for Case 1</p>   
  <p *ngSwitchCase="'case2'">Content for Case 2</p>   
  <p *ngSwitchDefault>Default Content</p> 
  </div>
  

• The content displayed dynamically changes based on the value of the condition.

ngClass:

#

• ngClass is an attribute Directive that adds a styling class to an HTML element based on a condition or function.
• Example:

  <div [ngClass]="{ fontcol: n > 5 && n < 11 }">
  </div>
  

• In the CSS file, the class fontcol needs to be defined:

  .fontcol {  
  color: blue; 
  }
  

• This approach enhances code readability and maintenance, separating style definitions from component logic.

ngStyle:

#

• ngStyle is an attribute Directive, providing a means to dynamically assign styles to HTML elements.
• It combines the features of a directive and a property, enabling the dynamic application of styles.
• Example:

  <div 
  [ngStyle]="{backgroundColor: n > 5 && n < 11 ? 'blue':'yellow'}">
  </div>
  

• Note: [ngStyle]expects a JavaScript object, allowing for expressive and dynamic styling based on conditions.

ngModel:

#

• ngModel is a two-way data-binding directive, linking the model and view seamlessly.
• It allows for real-time synchronization between user input and application data.
• Example:

  <input type="text" [(ngModel)]="username">
  

• The username variable in the component TypeScript file reflects the input changes in real-time.

ngSubmit:

#

• ngSubmit is a directive that binds to the submit event of a form, providing a clean way to handle form submissions.
• Example:

  <form (ngSubmit)="onSubmit()">   
  <!-- Form fields go here -->   
  <button type="submit">Submit</button> </form>
  

• The (ngSubmit) event calls the onSubmit function in the component when the form is submitted.

ngDisabled:

#

• ngDisabled is an attribute directive used to dynamically enable or disable an HTML element based on a condition.
• Example:

  <button [disabled]="isDisabled">Click me</button>
  

• The isDisabled variable controls the button’s disabled state.

ngHref:

#

• ngHref is an attribute directive that dynamically sets the href attribute of an anchor (<a>) element.
• Example:

   <a [ngHref]="dynamicLink">Go to Page</a>
  

• The dynamicLink variable defines the destination URL.

ngSrc:

#

• ngSrc is an attribute directive that dynamically sets the src attribute of an image (<img>) element.
• Example:

  <img [ngSrc]="dynamicImageSource" alt="Dynamic Image">
  

The dynamicImageSource variable defines the source URL for the image.

ngSrcset:

#

• ngSrcset is an attribute directive that dynamically sets the srcset attribute for responsive image loading.
• Example:

  <img [ngSrcset]="dynamicSrcset" alt="Responsive Image">
  

• The dynamicSrcset variable defines the source set for the image.

These are just some of the commonly used Angular directives. Be sure to refer to the official Angular documentation for the latest information on Built-in Directives