Anatomy of a Component

Analogy categoryAnalogies

A component is the fundamental building block of an Angular user interface: it combines a TypeScript class holding logic and state with an HTML template describing what should render, and optionally with its own CSS styles. Every component is defined by decorating a plain class with @Component, supplying metadata that tells Angular how to identify, render, and style instances of that class. Understanding each piece of this metadata, and how it relates to the class body, is foundational to everything else in Angular.

🏏

Cricket analogy: A component is like a full player profile: batting technique (logic/state) plus the way they present at the crease (template) plus their kit and gear (styles), all registered under one player name via @Component the way a scorecard registers a player.

The @Component Decorator

The @Component decorator accepts a metadata object with several important properties. selector defines the custom HTML tag (or attribute) used to place the component in a template, such as app-user-card. standalone: true (the default since Angular 17, and now often omitted since it's implied) tells Angular the component manages its own dependencies via an imports array rather than relying on an enclosing NgModule. template or templateUrl supplies the HTML, and styles or styleUrls supplies CSS, which Angular scopes to the component by default using view encapsulation so styles don't leak out to the rest of the page.

🏏

Cricket analogy: The selector is like a player's jersey number that lets the umpire and scorers place them at a specific fielding position, while styles acting scoped is like a team's kit colors only applying to their own players, never bleeding onto the opposition.

The Class Body

Below the decorator, the class itself holds the component's state (as plain properties or signals), methods that respond to user interaction, and lifecycle hooks such as ngOnInit or ngOnDestroy that Angular calls automatically at defined points in the component's life. Dependencies like services are typically obtained either via constructor injection or the newer inject() function, both of which pull instances from Angular's dependency injection system rather than the component instantiating them directly.

🏏

Cricket analogy: The class body's state and lifecycle hooks are like a bowler's run-up routine and pre-over rituals that automatically trigger at defined moments, while injecting a service via inject() is like calling on the team physio rather than diagnosing your own injury.

typescript

import { Component, Input, Output, EventEmitter, inject, signal } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `
    <div class="card">
      <h3>{{ fullName() }}</h3>
      <button (click)="promote()">Promote</button>
    </div>
  `,
  styles: [`
    .card { border: 1px solid #ddd; padding: 1rem; border-radius: 8px; }
  `],
})
export class UserCardComponent {
  private userService = inject(UserService);

  @Input({ required: true }) userId!: string;
  @Output() promoted = new EventEmitter<string>();

  fullName = signal('Loading...');

  ngOnInit(): void {
    this.userService.getUser(this.userId).subscribe((u) => {
      this.fullName.set(`${u.firstName} ${u.lastName}`);
    });
  }

  promote(): void {
    this.promoted.emit(this.userId);
  }
}

By default, Angular applies emulated view encapsulation to component styles, generating unique attribute selectors under the hood so a component's CSS cannot accidentally leak out to (or be leaked into by) unrelated parts of the page — conceptually similar to CSS Modules or scoped styles in Vue single-file components.

A common beginner mistake is forgetting to add a component to another component's imports array when using it in a template. Because standalone components declare their own dependencies explicitly, Angular will throw a template compilation error (e.g., 'is not a known element') if the child component isn't imported, unlike the older NgModule model where anything declared in the same module was implicitly visible.

A component pairs a decorated TypeScript class with a template and, optionally, its own styles.
@Component metadata includes selector, standalone, imports, template/templateUrl, and styles/styleUrls.
Standalone components declare their dependencies explicitly via an imports array rather than relying on an NgModule.
Component state can be held as plain properties or as signals; dependencies are obtained via constructor injection or inject().
Lifecycle hooks like ngOnInit and ngOnDestroy let Angular call into the component at defined points in its life.
Component styles are scoped by default via view encapsulation, preventing CSS from leaking in or out.

Practice what you learned

1. What decorator identifies a TypeScript class as an Angular component?

2. In a standalone component that uses a child component in its template, what must you do to avoid a compilation error?

3. What is view encapsulation's default effect on a component's styles?

4. Which lifecycle hook is commonly used to perform initialization logic, such as fetching data, once a component's inputs are set?

5. How can a component obtain an instance of an injectable service in modern Angular?

Was this page helpful?

Template Syntax and Interpolation

Related Study Notes in Web Development

Browse all study notes

Web Development

WebSockets Study Notes

Web Development · 30 topics

Web Development

WebAssembly Study Notes

WebAssembly · 30 topics

Web Development

gRPC Study Notes

Protocol Buffers · 30 topics

Web Development

Spring Boot Study Notes

Java · 30 topics

Web Development

Flask Study Notes

Python · 30 topics

Web Development

Django Study Notes

Python · 30 topics

Topics covered

#TypeScript#AngularStudyNotes#WebDevelopment#AnatomyOfAComponent#Anatomy#Component#Decorator#Class#StudyNotes#SkillVeris

Anatomy of a Component