Skip to main content

List all the built-in attribute directives

In Angular, built-in attribute directives are directives that change the behavior or appearance of existing elements.

Main directives

  1. NgClass - dynamically adds/removes CSS classes on an element. Accepts a string, an array, or an object with class names as keys and boolean values.
  2. NgStyle - dynamically changes an element's styles through a "property: value" object.
  3. NgModel - two-way binding of a form element's value to a component variable ([(ngModel)]).
  4. NgModelGroup - logical grouping of several NgModel instances inside a form for validation and structure.
  5. NgForm - a directive for <form> that tracks the form's state: validity, errors, changes.
  6. NgFormControl - a deprecated directive for managing individual form controls (the modern approach is FormControl).
  7. NgControl - the base class for all form control directives.
  8. NgControlStatus and NgControlStatusGroup - automatically add CSS classes (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched) depending on the state of the control or group.
  9. NgSwitch, NgSwitchCase, NgSwitchDefault - control the display of elements based on an expression's value (*ngSwitch on the container, *ngSwitchCase/*ngSwitchDefault on children).
  10. NgTemplateOutlet - allows dynamically rendering the content of <ng-template>.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.