Components

Learning objectives#

• Write a standalone component with @Component
• Use separate template and style files or inline ones
• Accept data with input()
• Compose components and understand style encapsulation

Explanation#

@Component({ selector, template or templateUrl, styles or styleUrl, imports }) turns a class into a component. The selector is the custom HTML tag: <app-product-card>.

Small components can use inline template and styles; larger ones use separate .html and .css files (the CLI default).

input() declares data passed in from the parent: name = input.required<string>(); price = input(0). Inside the template read them like signals: {{ name() }}.

A parent uses a child by importing the class in its imports array and writing its tag: <app-product-card [name]="p.name" />.

Styles are encapsulated by default: CSS in a component affects only that component’s template, so class names never clash.

Syntax#

1@Component({
2  selector: 'app-product-card',
3  templateUrl: './product-card.html',
4  styleUrl: './product-card.css',
5})
6export class ProductCard {
7  name = input.required<string>();
8  price = input(0);
9}

Code example: A reusable card used three times#

1import { Component, input } from '@angular/core';
2

3@Component({
4  selector: 'app-product-card',
5  template: `
6    <article class="card">
7      <h3>{{ name() }}</h3>
8      <p>₹{{ price() }}</p>
9      @if (price() > 500) { <span class="badge">Premium</span> }
10    </article>
11  `,
12  styles: `
13    .card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; width: 160px; }
14    .badge { background: #fde68a; padding: 2px 6px; border-radius: 4px; }
15  `,
16})
17export class ProductCard {
18  name = input.required<string>();
19  price = input(0);
20}
21

22@Component({
23  selector: 'app-product-list',
24  imports: [ProductCard],
25  template: `
26    <section class="grid">
27      @for (p of products; track p.id) {
28        <app-product-card [name]="p.name" [price]="p.price" />
29      }
30    </section>
31  `,
32  styles: `.grid { display: flex; gap: 12px; }`,
33})
34export class ProductList {
35  products = [
36    { id: 1, name: 'Pen', price: 20 },
37    { id: 2, name: 'Notebook', price: 60 },
38    { id: 3, name: 'Backpack', price: 1200 },
39  ];
40}

Three bordered cards appear in a row: “Pen ₹20”, “Notebook ₹60” and “Backpack ₹1200” with a yellow “Premium” badge. The .card styles apply only inside ProductCard.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. ProductCard declares two inputs: a required name and a price with default 0.
2. Its template reads inputs as signals: name(), price().
3. ProductList imports ProductCard, then uses <app-product-card> inside @for.
4. [name]="p.name" passes data from parent to child.
5. Each component’s styles are scoped to its own template.

Real-world use case#

Common mistakes#

Best practices#

• One component per file
• Prefix selectors (app-, shop-)
• Use input.required for mandatory data
• Keep components presentational where possible

Remember this#

Practice exercise#

1import { Component, input } from '@angular/core';
2

3@Component({
4  selector: 'app-user-badge',
5  template: `<span>{{ name() }} ({{ role() }})</span>`,
6})
7export class UserBadge {
8  name = input.required<string>();
9  role = input('Member');
10}
11// Usage: <app-user-badge name="Asha" role="Admin" />

Mini quiz#

Want more? Practise all Angular MCQs · Angular interview questions

Related topics#

My notes#

Saved in this browser.