Angular Interview Practice

Which directive is an example of a structural directive?

1. ngStyle

2. ngClass

3. *ngIf

4. ngModel

The correct answer is: *ngIf

A structural directive modifies the structure of the DOM by adding or removing elements based on certain conditions. The *ngIf directive is a prime example of this, as it conditionally includes or excludes a block of HTML based on a specified expression. When the expression evaluates to true, the associated HTML is rendered; when it evaluates to false, it is removed from the DOM entirely. This allows developers to create dynamic and responsive applications that adapt to user interactions or data changes effectively. In contrast, the other listed directives focus on altering the appearance or behavior of existing elements. ngStyle and ngClass are used for dynamically setting styles and classes, respectively, but they do not change the presence of DOM elements. Meanwhile, ngModel is used for two-way data binding in forms and does not affect the DOM structure itself. Thus, *ngIf stands out as the only option that directly influences the layout of the DOM by controlling element inclusion and exclusion.