[021] Directives - NgIf, NgIf;then;else, NgIfThen, NgIfElse [#angular18 +][ #انجولار+18 بالعربي]

Introduction

This tutorial focuses on the NgIf directive in Angular, which is a crucial structural directive for conditionally rendering elements. You will learn how to use NgIf, explore type narrowing, and understand performance considerations. The tutorial also addresses questions related to code cleanliness and best practices.

Step 1: Understanding NgIf

• Definition: NgIf is a structural directive that conditionally includes or excludes an element from the DOM based on a boolean expression.
• Basic Usage:
  • To use NgIf, you can bind it to a condition:

    <div *ngIf="condition">Content to display if condition is true</div>
    

Step 2: Exploring Structural Directives

• How Structural Directives Work:
  • Structural directives change the structure of the DOM by adding or removing elements.
  • They are denoted with an asterisk (*) before the directive name.
• Example:

  <div *ngIf="isLoggedIn">Welcome, User!</div>
  

Step 3: Implementing Type Narrowing

• Definition: Type narrowing is a TypeScript feature that allows you to refine the type of a variable based on certain conditions.
• Example of Type Narrowing with NgIf:

  if (user) {
      console.log(user.name); // user is narrowed to User type
  }
  

Step 4: Using NgIf with Else

• Syntax: You can use NgIf with an else block to specify an alternative template.
• Example:

  <div *ngIf="condition; else elseBlock">Content if true</div>
  <ng-template #elseBlock>
      <div>Content if false</div>
  </ng-template>
  

Step 5: Using NgIf with Then and Else

• Syntax: This allows you to define both then and else templates.
• Example:

  <div *ngIf="condition; then thenBlock; else elseBlock"></div>
  <ng-template #thenBlock>
      <div>Condition is true</div>
  </ng-template>
  <ng-template #elseBlock>
      <div>Condition is false</div>
  </ng-template>
  

Step 6: Implementing NgIf with Else If

• Usage: To handle multiple conditions, you can nest NgIf statements.
• Example:

  <div *ngIf="condition1; else ifBlock"></div>
  <ng-template #ifBlock>
      <div>Condition 1 is true</div>
  </ng-template>
  <ng-template #elseBlock>
      <div>Condition 1 is false, checking condition 2...</div>
      <div *ngIf="condition2">Condition 2 is true</div>
  </ng-template>
  

Step 7: Improving Code Performance

• Performance Considerations: Using NgIf can impact performance if not used carefully.
• Tip: Avoid complex expressions directly in the template; instead, use properties in the component class to evaluate conditions.

Step 8: Cleaning Up the Code

• Best Practices:
  • Use the CommonModule to simplify directives in your Angular module.
  • Keep logic out of templates, opting for clear, readable structures.

Conclusion

In this tutorial, you learned about the NgIf directive, how to implement it with various structures, type narrowing, and best practices for performance and code cleanliness. Moving forward, try to apply these concepts in your Angular projects to enhance conditional rendering and maintainability.