Components

Components

Components are the fundamental building blocks of an Angular application. Every piece of the UI is a component — the header, sidebar, cards, forms, buttons — everything.

What Is a Component?

A component is a TypeScript class with:

1. A @Component decorator — metadata that tells Angular how to use it
2. A template — the HTML that defines the view
3. A class — the logic (properties and methods)
4. Styles — CSS scoped to this component

Component Anatomy

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

@Component({
    selector: 'app-greeting',           // HTML tag: <app-greeting>
    templateUrl: './greeting.component.html',
    styleUrls: ['./greeting.component.css']
})
export class GreetingComponent {
    // Properties (data)
    name: string = "Angular";
    version: number = 2;

    // Methods (behavior)
    greet(): string {
        return `Hello from ${this.name}!`;
    }
}

@Component Decorator Properties

Property	Purpose
selector	The custom HTML tag name (e.g., <app-greeting>)
templateUrl	Path to the external HTML template file
template	Inline HTML template (for small templates)
styleUrls	Array of external CSS file paths
styles	Inline CSS styles array

Inline Template & Styles

@Component({
    selector: 'app-badge',
    template: `
        <span class="badge">{{ label }}</span>
    `,
    styles: [`
        .badge {
            background: #3498db;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
        }
    `]
})
export class BadgeComponent {
    label: string = "New";
}

Use inline templates for very small components. Use templateUrl for anything more than a few lines.

Component Lifecycle

Angular components go through a series of lifecycle hooks:

Hook	When It Runs
ngOnInit()	After the component is initialized (most used!)
ngOnChanges()	When input properties change
ngDoCheck()	During every change detection run
ngAfterViewInit()	After the view (template) is initialized
ngOnDestroy()	Just before the component is destroyed

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'app-user',
    templateUrl: './user.component.html'
})
export class UserComponent implements OnInit, OnDestroy {
    user: string = '';

    ngOnInit(): void {
        // Runs once after component is created
        // Perfect for fetching data, setting up subscriptions
        console.log('Component initialized!');
        this.user = 'Alice';
    }

    ngOnDestroy(): void {
        // Cleanup — unsubscribe, clear timers
        console.log('Component destroyed!');
    }
}

Using a Component

<!-- In any parent template, use the selector as an HTML tag: -->
<app-greeting></app-greeting>

<!-- Multiple instances: -->
<app-badge></app-badge>
<app-badge></app-badge>
<app-badge></app-badge>

Registering a Component

Every component must be declared in a module:

@NgModule({
    declarations: [
        AppComponent,
        GreetingComponent,  // Register it here!
        BadgeComponent,
    ],
    // ...
})

The CLI does this automatically when you use ng generate component.

Key Takeaways

• Components are the building blocks of Angular — everything is a component
• A component = decorator + template + class + styles
• The selector defines the custom HTML tag used to render the component
• ngOnInit() is the most common lifecycle hook — for initialization logic
• Every component must be declared in a module's declarations array
• Use ng generate component to let the CLI handle scaffolding and registration