Angular Components

What Is an Angular Component?

A component is a TypeScript class decorated with @Component, paired with a template that describes its view. Angular instantiates a component whenever its selector appears in a template, manages its lifecycle, and keeps its view in sync with its class properties.

Components are composable: a ProductListComponent might render several ProductCardComponent instances, each responsible for a single product's UI, keeping every piece small and testable.

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-card',
  standalone: true,
  template: `
    <div class="card">
      <h3>{{ title }}</h3>
      <p>{{ price | currency }}</p>
    </div>
  `,
})
export class ProductCardComponent {
  title = 'Wireless Mouse';
  price = 24.99;
}

The template uses interpolation ({{ }}) and the built-in currency pipe to format the price.

The @Component Decorator

@Component({
  selector: 'app-name',
  standalone: true,
  templateUrl: './name.component.html',
  styleUrl: './name.component.css',
  imports: [CommonModule],
})
export class NameComponent {}

• selector is the custom HTML tag used to place this component in a template.
• templateUrl/template defines the view; use one or the other, not both.
• styleUrl/styles defines CSS scoped to just this component.
• imports lists other standalone components, directives, or pipes the template needs.

Angular Components Cheatsheet

Metadata options and patterns you will use when defining components.

Creating a Component

Components can be generated with the CLI (ng generate component) or created by hand. Either way, the pattern is the same: a class, a decorator with metadata, and a template.

ng generate component product-card --standalone

The CLI creates product-card.component.ts/.html/.css/.spec.ts with correct naming automatically.

Composing Components

Larger UIs are built by nesting components inside each other. A parent component's template references child components by their selector, and data typically flows down via inputs while events flow up via outputs.

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [ProductCardComponent],
  template: `
    <app-product-card
      *ngFor="let p of products"
      [title]="p.title"
      [price]="p.price"
    ></app-product-card>
  `,
})
export class ProductListComponent {
  products = [{ title: 'Mouse', price: 24.99 }];
}

Selector Types

Most components use an element selector (a custom tag), but Angular also supports attribute and class selectors, useful for directives applied to existing elements rather than standalone components.

Common Mistakes

• Defining both template and templateUrl on the same component (only one is allowed).
• Forgetting to add a child component to the parent's imports array in standalone components.
• Putting too much logic directly in components instead of delegating to services.
• Choosing overly generic selectors (like app-item) that collide across features.

Key Takeaways

• A component pairs a @Component-decorated class with a template and optional styles.
• Components compose into a tree; parents pass data down and listen for events from children.
• Standalone components declare their own dependencies through the imports array.
• The Angular CLI generates correctly named and wired component files automatically.