Replicate Angular's ngIf Directive

This challenge asks you to build a custom directive in Angular that mimics the functionality of the built-in ngIf directive. Understanding how structural directives work is fundamental to building dynamic and responsive Angular applications. Your goal is to create a directive that conditionally renders an element based on a given boolean expression.

Problem Description

You need to implement a custom structural directive named appIf. This directive should behave identically to Angular's ngIf. It will take a boolean expression as input and, based on the truthiness of that expression, either render the host element and its children or remove them from the DOM.

Key Requirements:

1. Conditional Rendering: The directive must add or remove the host element from the DOM based on the provided condition.
2. Template Integration: It should work with any HTML element or Angular component as its host.
3. Boolean Expression: The input to the directive should be a boolean value or an expression that evaluates to a boolean.
4. No Explicit Template Manipulation: Avoid directly manipulating elementRef.nativeElement. Leverage Angular's templating and view manipulation APIs.
5. else Block (Optional but Recommended): For a more complete implementation, consider how you might handle an else condition, similar to ngIfElse.

Expected Behavior:

• If the condition passed to appIf is truthy, the host element should be present in the DOM.
• If the condition is falsy, the host element should be removed from the DOM.
• When the condition changes, the directive should update the DOM accordingly.

Edge Cases to Consider:

• What happens if the condition is null or undefined?
• How does the directive handle changes to the condition after initial rendering?

Examples

Example 1: Simple Conditional Rendering

Consider the following template:

<div *appIf="isLoggedIn">Welcome back, user!</div>

If isLoggedIn is true, the div element should be rendered. If isLoggedIn is false, the div element should not be in the DOM.

Example 2: Conditional Rendering with a Change

Scenario:

1. Initially, a component has showDetails = false. The template is:

   <p *appIf="showDetails">These are the details.</p>
   

   The <p> element is not rendered.

2. Later, the component's showDetails property is set to true. The <p> element should now be rendered in the DOM.

Example 3: Handling null condition

Consider the template:

<span *appIf="user?.name">User Name: {{ user.name }}</span>

If user is null or undefined, the user?.name expression will evaluate to undefined (falsy). The <span> element should not be rendered.

Constraints

• Your directive must be implemented in TypeScript.
• The directive should be registered as a standalone directive or within an Angular module.
• You are expected to use Angular's ViewContainerRef and TemplateRef for DOM manipulation.
• Avoid direct DOM manipulation using document.getElementById, elementRef.nativeElement.appendChild, etc.

Notes

• Remember that structural directives modify the DOM structure by adding or removing elements. They operate on TemplateRefs.
• The * syntax in Angular is syntactic sugar. Your directive will be applied like <ng-template [appIf]="condition"><p>...</p></ng-template>.
• Consider using OnChanges to react to changes in the input property.
• For the else block, you will likely need to accept another TemplateRef as input.