Components Basics

Generate, compose, and nest Angular components using the CLI and standalone component syntax.

Generating a Component with the CLI

The Angular CLI generates a component's full set of files — TypeScript class, template, styles, and a test file — following consistent naming conventions automatically.

ng generate component product-card
# shorthand: ng g c product-card

src/app/product-card/
├── product-card.component.ts
├── product-card.component.html
├── product-card.component.css
└── product-card.component.spec.ts

The selector Property

A component's selector defines the custom HTML tag that renders it elsewhere in your app.

// product-card.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-product-card',
  standalone: true,
  template: `
    <div class="card">
      <h3>Wireless Mouse</h3>
      <p>$24.99</p>
    </div>
  `,
  styles: [`.card { padding: 1rem; border-radius: 8px; }`],
})
export class ProductCardComponent {}

Using a Component Inside Another

A standalone component imports whichever other standalone components it wants to use directly in its own imports array.

// app.component.ts
import { Component } from '@angular/core';
import { ProductCardComponent } from './product-card/product-card.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ProductCardComponent],
  template: `
    <h1>Our Products</h1>
    <app-product-card />
  `,
})
export class AppComponent {}

Standalone Means Explicit Imports

Because standalone components declare their own dependencies directly (rather than relying on an NgModule's declarations), it's always clear from a component's imports array exactly which other components, directives, or pipes it uses.

Composing Components

Real applications nest components many levels deep — exactly like every other component-based framework, breaking a page down into progressively smaller, focused pieces.

AppComponent
└── ProductPageComponent
    ├── ProductGalleryComponent
    ├── ProductDetailsComponent
    │   └── AddToCartButtonComponent
    └── ReviewListComponent
        └── ReviewCardComponent (repeated per review)

Common Beginner Mistakes

Forgetting to add a component to the imports array

Using <app-product-card /> in a template without importing ProductCardComponent produces a template error — Angular has no way to know what that tag means.

Using the same selector prefix as a native HTML element

Always prefix custom selectors (app-, or your own convention) to avoid ever colliding with a real or future HTML element name.

FAQs

Do I have to use the CLI to create components?

No, but it's strongly recommended — it keeps file naming and structure consistent, and automatically wires up a spec (test) file.

Can a component have no template at all?

Not meaningfully — every component needs some template (even an empty one) to render, though it can be extremely minimal if the component is purely a logic wrapper.

Summary

Standalone components declare their own dependencies explicitly, making composition clear and traceable. Next, you'll dig into template syntax and interpolation.

Next Lesson →