Mastering Angular: A Complete Guide to Modern Web Development

📘 Chapter 2: Components, Templates, and Data Binding

🧩 Understanding Angular Components

Components are the fundamental building blocks of Angular applications. Each component encapsulates a portion of the user interface (UI) along with its associated logic.

🔹 Structure of a Component

An Angular component typically consists of:

• Decorator: @Component metadata that defines the component's selector, template, and styles.
• Class: Contains properties and methods that support the view.
• Template: Defines the HTML view.
• Styles: CSS or SCSS files that style the component.

✅ Example: Creating a Component

bash

ng generate component greeting

This command generates the following files:

• greeting.component.ts: Component logic.
• greeting.component.html: Template.
• greeting.component.css: Styles.
• greeting.component.spec.ts: Unit tests.

greeting.component.ts

typescript

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

@Component({

  selector: 'app-greeting',

  templateUrl: './greeting.component.html',

  styleUrls: ['./greeting.component.css']

})

export class GreetingComponent {

  name: string = 'Angular Learner';

}

greeting.component.html

html

<h2>Welcome, {{ name }}!</h2>

🖼️ Angular Templates

Templates in Angular define the HTML structure of a component's view. They can include standard HTML elements, Angular directives, and binding syntax.

🔹 Template Syntax

Angular templates support:

• Interpolation: {{ expression }} to display component data.
• Property Binding: [property]="expression" to bind properties.
• Event Binding: (event)="handler" to handle events.
• Two-Way Binding: [(ngModel)]="property" for two-way data binding.

🔗 Data Binding in Angular

Data binding connects the component's logic with its template, allowing for dynamic and interactive UIs.

🔹 Types of Data Binding

✅ Interpolation

Displays dynamic data in the template.

Example:

html

<p>Hello, {{ name }}!</p>

Component:

typescript

name: string = 'Angular';

✅ Property Binding

Binds a property in the component to an element property.

Example:

html

<img [src]="imageUrl" alt="Angular Logo">

Component:

typescript

imageUrl: string = 'assets/angular-logo.png';

✅ Event Binding

Responds to user actions by binding events to component methods.

Example:

html

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

Component:

typescript

onClick() {

  alert('Button clicked!');

}

✅ Two-Way Binding

Combines property and event binding to synchronize data.

Example:

html

<input [(ngModel)]="username">

<p>Your username is: {{ username }}</p>

Component:

typescript

username: string = '';

Note: To use ngModel, import FormsModule in your module:

typescript

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

@NgModule({

  imports: [FormsModule],

  // ...

})

🧠 Summary Table