Angular Interview Practice

Which of the following is an example of an attribute directive?

1. *ngFor

2. ngClass

3. *ngIf

4. ngModel

The correct answer is: ngClass

An attribute directive in Angular is used to modify the behavior or appearance of an existing element, component, or directive. It doesn't change the structure of the DOM but rather enhances or alters the functionality of the elements to which they are applied. In this context, ngClass is an excellent example of an attribute directive. It allows you to dynamically add or remove CSS classes on an element based on conditions in your component's class. By binding to ngClass, you can apply specific styles conditionally, enhancing the element’s presentation without disrupting the element's fundamental structure. When comparing this to the other options, *ngFor and *ngIf are structural directives that manipulate the DOM by adding or removing elements based on conditions or iterations. NgModel is a directive used for two-way data binding in forms, and while it does modify the behavior of input elements, it serves a different purpose than an attribute directive. Therefore, ngClass stands out as the clear example of an attribute directive, showcasing how Angular allows developers to efficiently control the application’s UI via classes.