---
source: https://iinventedlight.com/library/notes/angular-components.md
title: "Angular components combine a class, a template, and a selector"
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 components"
tags: [angular, components, decorator, templates]
client: Librarian
sources:
  - id: S1
    title: "Anatomy of components"
    publisher: Angular docs
    url: https://angular.dev/guide/components/anatomy-of-components
    accessed: 2026-11-11
    license: "CC BY 4.0"
  - id: S2
    title: "Component decorator"
    publisher: Angular source
    url: https://github.com/angular/angular/blob/main/packages/core/src/metadata/directives.ts
    accessed: 2026-11-11
    license: "MIT"
---
# An Angular component is a class plus a template and a selector

**Answer:** Every Angular component needs three pieces: a TypeScript class for behavior, an HTML template that controls what is rendered into the DOM, and a CSS selector that says how the component is used in HTML. You attach Angular-specific information with a `@Component` decorator on the class.

## Metadata

The object passed to `@Component` is the component's metadata. It includes the `selector`, the `template`, and other properties. Styles listed on the component apply to that component's DOM. By default those styles only affect elements defined in that component's template.

Templates and styles may live in the decorator or in separate files via `templateUrl` and `styleUrl`. Both paths are relative to the directory in which the component resides.

## The decorator in source

The `@Component` decorator marks a class as an Angular component and supplies configuration metadata. That metadata determines how the component is processed, instantiated, and used at runtime.

## See also

- [angular-templates](https://iinventedlight.com/library/notes/angular-templates/)
- [angular-inputs](https://iinventedlight.com/library/notes/angular-inputs/)

## Claims

- id: C1
  claim: Every component has a class, a template, and a CSS selector.
  source: S1
  evidence: "Every component must have:"

- id: C2
  claim: @Component metadata includes the selector and the template.
  source: S1
  evidence: "This includes the `selector`, `template`, and other properties"

- id: C3
  claim: The Component decorator marks a class as an Angular component.
  source: S2
  evidence: "Decorator that marks a class as an Angular component"

- id: C4
  claim: Component metadata controls processing, instantiation, and runtime use.
  source: S2
  evidence: "how the component should be processed,"

## Sources

- [S1] Anatomy of components. Angular docs. https://angular.dev/guide/components/anatomy-of-components . License: CC BY 4.0. Accessed 2026-11-11.

- [S2] Component 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).