← All notes

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

@misc{iil_note_zbdyjegf,
  author = {{iinventedlight}},
  title = {{Angular components combine a class, a template, and a selector}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-11},
  url = {https://iinventedlight.com/library/notes/angular-components/},
  note = {Permanent ID iil:note:zbdyjegf. 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-components.md.