Angular Components

Angular is a component-based framework, meaning every part of your application (header, footer, form, button, page) is built as a component. Each component contains HTML (template), CSS (styles), and TypeScript (logic).

1. Creating a Component

Use Angular CLI to generate a component quickly:


ng generate component home
# or
ng g c home

This creates:


home/
├── home.component.ts → Component logic
├── home.component.html → Template (UI)
├── home.component.css → Styling
├── home.component.spec.ts → Testing file

2. Component Decorator

Every component has an @Component decorator, which tells Angular how to handle it.


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

@Component({
selector: 'app-home', // HTML tag to use this component
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
}

3. Component Structure

A component has three main parts:

  1. Template (HTML) – What the user sees
  2. Styles (CSS/SCSS) – How it looks
  3. Class (TypeScript) – Logic and data

Example:

home.component.html


<h2>{{ title }}</h2>

home.component.ts


title = "Welcome to Angular Components!";

4. Data Binding

Angular provides four ways to bind data between the component class and template.

  1. Interpolation ( {{ }} )
  2. Displays data in the template:

<p>Hello {{ userName }}</p>

userName = "Chinmaya";
  1. Property Binding ( [ ] )
  2. Binds values to HTML element properties:

<img [src]="profileImage">

profileImage = "assets/photo.png";
  1. Event Binding ( ( ) )
  2. Handles events like click, input, keypress:

<button (click)="showMessage()">Click Me</button>

showMessage() {
alert("Button clicked!");
}
  1. Two-way Binding ( [(ngModel)] )
  2. Used in forms to bind input values. Requires FormsModule imported in your module:

import { FormsModule } from '@angular/forms';

Example:


<input [(ngModel)]="fullName" placeholder="Enter name">
<p>You typed: {{ fullName }}</p>

fullName = '';

5. Component Lifecycle Hooks

Angular calls certain methods automatically at specific stages of a component’s life.

Most important hooks:

  1. ngOnInit() – Runs after the component loads (used for API calls)
  2. ngOnDestroy() – Runs before the component is destroyed (used to unsubscribe from observables)
  3. ngOnChanges() – Runs when input properties change
  4. ngAfterViewInit() – Runs after the component’s view is initialized

Example:


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

@Component({
selector: 'app-demo',
templateUrl: './demo.component.html'
})
export class DemoComponent implements OnInit, OnDestroy {

ngOnInit() {
console.log('Component initialized');
}

ngOnDestroy() {
console.log('Component destroyed');
}
}

Summary

  1. Components are the building blocks of Angular
  2. Use CLI to create components quickly
  3. @Component decorator defines selector, template, and styles
  4. Data binding connects templates and logic: interpolation, property, event, two-way
  5. Lifecycle hooks help manage initialization and cleanup