← All notes

Answer: Directives add behavior to elements and components in an Angular application. A directive can change an element's look, its behavior, or its place in the DOM. Angular includes built-in directives, and you may author your own.

Typical uses

Directives are most effective when they encapsulate reusable behavior for an existing element or component. Typical uses include applying the same appearance or behavior across many elements, reading or writing the host element's DOM, attributes, or classes, and adding behavior to a component you do not own without changing its source.

If you need to render your own markup, reach for a component. A component is a specialized directive that has a template.

You apply a custom directive by adding its selector as an attribute on an element. Every element that carries that selector gains the same behavior, with the logic defined in one place.

In source

The @Directive decorator marks a class as an Angular directive. Custom directives attach extra behavior to DOM elements. The decorator options are configuration metadata that determine how the directive is processed, instantiated, and used at runtime.

See also

• angular-components
• angular-inputs

Claims

• id: C1 claim: Directives add behavior to elements and components. source: S1 evidence: "Directives add behavior to elements and components in your Angular applications."

• id: C2 claim: A directive can change look, behavior, or place in the DOM. source: S1 evidence: "A directive can change how an element looks"

• id: C3 claim: A component is a specialized directive with its own template. source: S1 evidence: "a specialized directive with its own template."

• id: C4 claim: The Directive decorator marks a class as an Angular directive. source: S2 evidence: "Decorator that marks a class as an Angular directive."

Sources

• [S1] Directives overview. Angular docs. https://angular.dev/guide/directives . License: CC BY 4.0. Accessed 2026-11-11.

• [S2] Directive decorator. Angular source. https://github.com/angular/angular/blob/main/packages/core/src/metadata/directives.ts . License: MIT. Accessed 2026-11-11.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Angular documentation (angular/angular adev): Copyright (c) 2010-2026 Google LLC; CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Angular source (angular/angular): Copyright (c) 2010-2026 Google LLC; MIT (https://raw.githubusercontent.com/angular/angular/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_dg9sqsj5,
  author = {{iinventedlight}},
  title = {{Angular directives add behavior to existing elements and components}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-11},
  url = {https://iinventedlight.com/library/notes/angular-directives/},
  note = {Permanent ID iil:note:dg9sqsj5. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/angular-directives.md.