An Angular component has three core parts: a TypeScript class, an HTML template and a CSS selector, configured with the @Component decorator. The class holds behavior, the template defines rendered content, and the selector lets another template use the component. The decorator’s metadata can also configure styles and other options.
The three core parts of a component
TypeScript class
The class contains a component’s behavior, such as responding to user input or requesting data. Angular associates the class with its template and configuration through the @Component decorator. Angular’s component guide describes the class, template and selector as the required parts of a component.
HTML template
The template defines the DOM Angular renders for the component. It can be written inline in the template metadata property or kept in a separate HTML file referenced by templateUrl. Angular templates combine HTML with framework features such as data binding and event listeners; Angular compiles them into JavaScript. See the Angular templates guide.
CSS selector
The selector identifies the component in a template. It is a CSS selector, commonly an element name such as app-profile, that a parent template can use to include the component. Angular matches component selectors statically at compile time: changing the DOM at runtime does not trigger a new match, and one element can match exactly one component selector. See Angular’s selector guide.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
What the @Component decorator configures
The object passed to @Component is metadata: it connects the class to its selector, template and optional settings. Depending on the component, the metadata may also define styles, inputs and outputs, host bindings, providers and queries. These are configuration options and extensions—not extra required parts of every component. The Component API reference documents these options.
Styles and encapsulation
Styles are optional. You can put them inline in the component metadata or refer to external style files. By default, component styles apply to elements in that component’s template. Angular’s encapsulation policies are Emulated, None and browser-native ShadowDom; the compiler default is Emulated unless it is overridden.
How a component appears inside another component
To use a component in a standalone parent, make it available through the parent’s imports metadata and place an element matching its selector in the parent’s template. Angular creates a component instance for each matching element. That element is the component’s host element; the DOM rendered from its template is its view. Components nested this way form a component tree. Angular’s components essentials and component guide explain this composition model.
Standalone components and older NgModule projects
Components are standalone by default in current Angular. A standalone component lists the components, directives and pipes its template uses in its imports. The default changed in Angular 19: before version 19.0.0, standalone defaulted to false. In older NgModule-based projects, a non-standalone component is made available through its NgModule instead. When working in an existing codebase, check its Angular version and component configuration rather than assuming the current default applies. See the component guide and Component API.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Rank #3
Optional features that extend a component
Inputs and outputs
Inputs let a component receive data through data-bound properties that Angular updates. Outputs let it expose event emissions for template listeners. They define ways other parts of an application can interact with a component; neither is required for every component.
Lifecycle hooks
Angular’s lifecycle runs from component creation through destruction, with hooks associated with rendering and change checking. During checking, Angular traverses the application tree from top to bottom. Avoid relying on a fixed order between a component’s lifecycle hook and a directive hook on the same element: Angular does not guarantee that ordering. See the component lifecycle guide.
Host directives
Host directives provide another way to compose behavior. When a directive is applied through hostDirectives, Angular ignores its selector. Its inputs and outputs also remain private to that directive unless the component explicitly maps them into its own API. See the directive composition API guide.
Inline or separate files?
Angular supports both inline and external templates and styles. Inline content keeps markup or CSS beside the class in its metadata; external files separate those concerns into their own files. This is a project-level organization choice, not a difference in the component’s essential parts. Angular’s component guide shows these options.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
