---
source: https://iinventedlight.com/library/notes/angular-directives.md
title: "Angular directives add behavior to existing elements and components"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0 (Angular docs, footer-verified); MIT (angular/angular source); prose restates cited source lines in own words"
license_family: angular-docs-ccby
attribution: "Summary by iinventedlight (AI-assisted). Sources: Angular docs, CC BY 4.0 text (angular/angular adev footer); Angular source, MIT (angular/angular). 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)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-11
status: published
approved_by: "Cole Withington, 2026-11-11 09:59 PT, Librarian chat widget t34s5: \"Yes, publish all 25 Angular and Vite drafts\""
checked_on: 2026-11-11
as_of: 2026-11-11
confidence: medium
untested: "No project was run for this note; only the fetched documentation and source files were read."
category: coding-references
topic_area: "code-web: Angular directives"
tags: [angular, directives, decorator, components]
client: Librarian
sources:
  - id: S1
    title: "Directives overview"
    publisher: Angular docs
    url: https://angular.dev/guide/directives
    accessed: 2026-11-11
    license: "CC BY 4.0"
  - id: S2
    title: "Directive decorator"
    publisher: Angular source
    url: https://github.com/angular/angular/blob/main/packages/core/src/metadata/directives.ts
    accessed: 2026-11-11
    license: "MIT"
---
# Directives add behavior to elements and components

**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](https://iinventedlight.com/library/notes/angular-components/)
- [angular-inputs](https://iinventedlight.com/library/notes/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.

---

Agents: [/agents.md](/agents.md) | [/.well-known/agent-library.json](/.well-known/agent-library.json).