What Is a Component

A component is the fundamental building block of Angular. Every piece of your UI is a component. Understanding the anatomy of one component well means understanding how all of them work.

The @Component decorator

In Angular, a component is a TypeScript class decorated with @Component:

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

@Component({
  selector: 'app-movie-card',
  templateUrl: './movie-card.html',
  styleUrl: './movie-card.css'
})
export class MovieCard {
  // component logic goes here
}

The @Component decorator tells Angular three things:

1. selector: The custom HTML tag that represents this component in other templates. When Angular sees <app-movie-card /> in a template, it renders this component there.
2. templateUrl: The path to this component’s HTML template. The template defines what the component renders.
3. styleUrl: The path to this component’s styles. These styles are scoped — they only affect elements inside this component’s template.

The selector is a custom HTML element

When you include a component in another component’s template, you use its selector as an HTML tag:

home.html

<div class="grid">
  <app-movie-card />
  <app-movie-card />
  <app-movie-card />
</div>

Angular replaces each <app-movie-card /> with that component’s rendered output. The convention is to prefix selectors with app- to distinguish them from standard HTML elements.

The template defines the view

A component’s template is standard HTML, extended with Angular syntax. A minimal MovieCard template might look like:

movie-card.html

<div class="card">
  <img [src]="posterUrl" [alt]="movie.title" />
  <div class="info">
    <h3>{{ movie.title }}</h3>
    <p>{{ movie.release_date | date:'yyyy' }}</p>
  </div>
</div>

The {{ }} syntax is interpolation — it renders a property value from the component class. The [src] syntax is property binding. The | date is a pipe. You will learn all of these in Module 03.

Scoped styles

Styles in a component’s CSS file are automatically scoped. A rule like:

movie-card.css

.card {
  border-radius: 8px;
  background: #1a1a1a;
}

Only applies to .card elements inside this component. Angular adds a unique attribute to the component’s elements and rewrites the CSS to target that attribute. This prevents styles from leaking between components.

Generating a component

Use the CLI to generate a component instead of creating files by hand:

ng generate component components/movie-card

Short form:

ng g c components/movie-card

This creates four files:

src/app/components/movie-card/
├── movie-card.ts         ← the class
├── movie-card.html       ← the template
├── movie-card.css        ← the styles
└── movie-card.spec.ts    ← the unit test

Note: Angular 17+ uses movie-card.ts instead of movie-card.component.ts. The class name is still MovieCard.

Exercise

1. In your my-first-app project, generate a component called components/greeting:

   ng g c components/greeting

2. Open greeting.html and replace its contents with:

   <p>Hello from GreetingComponent!</p>

3. Open app.component.html, clear its contents, and add:

   <app-greeting />

4. Open app.component.ts and add Greeting to the imports array in the @Component decorator. (Angular will guide you with an error if you forget.)
5. Run ng serve and confirm you see the greeting.

Recap

• A component is a TypeScript class decorated with @Component.
• The selector is the custom HTML tag used to embed the component in other templates.
• The templateUrl points to the component’s HTML template.
• The styleUrl points to scoped CSS that only applies inside this component.
• Generate components with ng generate component <path> to create all four files at once.