Suggest an edit

Improve this article

Refine the answer for “List all the built-in attribute directives”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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>`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts187 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.