Implementing a Basic ngIf Directive in Angular

This challenge asks you to implement a simplified version of Angular's ngIf directive. The ngIf directive conditionally includes or excludes a portion of the DOM based on an expression's truthiness. Successfully implementing this directive will solidify your understanding of Angular's template rendering and directive lifecycle.

Problem Description

You need to create a directive named ConditionalVisibilityDirective that mimics the core functionality of Angular's ngIf. The directive should take an input property named isVisible (of type boolean). Based on the value of isVisible, the directive should either add or remove a specified element from the DOM.

What needs to be achieved:

• Create an Angular directive that conditionally displays or hides an element.
• The directive should accept a boolean input (isVisible) to control the element's visibility.
• When isVisible is true, the element should be present in the DOM.
• When isVisible is false, the element should be removed from the DOM.

Key Requirements:

• The directive must be injectable into Angular components.
• The directive must react to changes in the isVisible input.
• The directive should not affect any other elements in the DOM besides the one it's attached to.
• The directive should use Angular's lifecycle hooks appropriately to add and remove the element.

Expected Behavior:

When the isVisible input changes, the directive should:

1. If isVisible is true, add the element to the DOM (if it's not already there).
2. If isVisible is false, remove the element from the DOM (if it's present).

Edge Cases to Consider:

• Initial value of isVisible: The directive should handle the initial value of isVisible correctly when the component is first rendered.
• Rapid changes in isVisible: The directive should efficiently handle frequent changes in the isVisible input without causing performance issues.
• Element already present/absent: The directive should correctly handle cases where the element is already present or absent in the DOM.

Examples

Example 1:

Input: Component HTML: <div *conditionalVisibility="isVisible">This content should be visible.</div>, isVisible = true
Output: The div element containing "This content should be visible." is present in the DOM.
Explanation: Since isVisible is true, the element is added to the DOM.

Example 2:

Input: Component HTML: <div *conditionalVisibility="isVisible">This content should be visible.</div>, isVisible = false
Output: The div element containing "This content should be visible." is removed from the DOM.
Explanation: Since isVisible is false, the element is removed from the DOM.

Example 3:

Input: Component HTML: <div *conditionalVisibility="isVisible">This content should be visible.</div>, isVisible = true (initially false), then changes to false.
Output: Initially, the div is not present. When isVisible becomes true, the div is added. When isVisible becomes false again, the div is removed.
Explanation: The directive correctly handles the change in visibility.

Constraints

• The directive must be implemented using TypeScript.
• The directive should not rely on external libraries beyond Angular itself.
• The directive should be performant and avoid unnecessary DOM manipulations.
• The directive should be compatible with standard Angular component structures.

Notes

• Consider using Angular's ElementRef and Renderer2 to manipulate the DOM safely and efficiently. Renderer2 is preferred over direct DOM manipulation for better cross-platform compatibility.
• Think about which lifecycle hooks are most appropriate for adding and removing the element. ngOnInit and ngOnDestroy are good starting points.
• Remember that the * syntax in the template is Angular's way of applying a directive. Your directive will be applied as an attribute selector.
• Focus on the core functionality of conditional visibility. Advanced features like template re-rendering are beyond the scope of this challenge.