#3 Session 2: Components, Templates & Data Binding (2 Hours)

 Here are the lecture notes for Session 2: Components, Templates & Data Binding (2 hours) with a step-by-step hands-on guide.

---

Session 2: Components, Templates & Data Binding (2 Hours)

Learning Objectives

✅ Understand what Angular components are and how they work
✅ Learn about component templates and styling
✅ Explore different types of data binding (interpolation, property binding, event binding, two-way binding)
✅ Hands-on practice by creating a dynamic interactive component

---

1. Understanding Angular Components (30 mins)

What is a Component?

• A component is the basic building block of an Angular application.
• It consists of:
  • Template (.html) – Defines the structure (UI).
  • Class (.ts) – Defines logic & data.
  • Styles (.css or .scss) – Defines the appearance.

Component Lifecycle

Each component has lifecycle hooks that help manage its behavior.

• ngOnInit() – Runs when the component is initialized.
• ngOnDestroy() – Runs when the component is removed from the DOM.

---

2. Creating & Using Components (Step-by-Step) (30 mins)

Step 1: Generate a New Component

In your Angular project, open the terminal and run:

ng generate component user-profile

or

ng g c user-profile

This creates:
📄 user-profile.component.ts (Logic)
📄 user-profile.component.html (Template/UI)
📄 user-profile.component.css (Styling)
📄 user-profile.component.spec.ts (Testing - optional)

---

Step 2: Modify the Component

1. Open src/app/user-profile/user-profile.component.ts

2. Modify the TypeScript class:

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-user-profile',
     templateUrl: './user-profile.component.html',
     styleUrls: ['./user-profile.component.css']
   })
   export class UserProfileComponent {
     name: string = 'John Doe';
     age: number = 25;
     city: string = 'New York';
   }
   

3. Open src/app/user-profile/user-profile.component.html and update the template:

   <h2>User Profile</h2>
   <p><strong>Name:</strong> {{ name }}</p>
   <p><strong>Age:</strong> {{ age }}</p>
   <p><strong>City:</strong> {{ city }}</p>
   

4. Open src/app/app.component.html and include the component:

   <app-user-profile></app-user-profile>
   

5. Run the project:

   ng serve
   

6. Open http://localhost:4200/ – You should see the User Profile component displayed! 🎉

---

3. Understanding Data Binding (30 mins)

Angular provides four types of data binding:

Type	Syntax	Description
Interpolation	{{ data }}	Displays data in the template
Property Binding	[property]="data"	Binds a value to an HTML property
Event Binding	(event)="method()"	Calls a method on an event
Two-Way Binding	[(ngModel)]="data"	Syncs data between class & template

---

Step 3: Hands-on with Data Binding

1. Modify user-profile.component.ts

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-user-profile',
     templateUrl: './user-profile.component.html',
     styleUrls: ['./user-profile.component.css']
   })
   export class UserProfileComponent {
     name: string = 'John Doe';
     age: number = 25;
     city: string = 'New York';
     imageUrl: string = 'https://via.placeholder.com/150';
   
     updateName() {
       this.name = 'Jane Doe';
     }
   }
   

2. Modify user-profile.component.html

   <h2>User Profile</h2>
   
   <!-- Interpolation -->
   <p><strong>Name:</strong> {{ name }}</p>
   <p><strong>Age:</strong> {{ age }}</p>
   <p><strong>City:</strong> {{ city }}</p>
   
   <!-- Property Binding -->
   <img [src]="imageUrl" alt="Profile Picture">
   
   <!-- Event Binding -->
   <button (click)="updateName()">Change Name</button>
   
   <!-- Two-Way Binding -->
   <br>
   <input [(ngModel)]="name" placeholder="Enter new name">
   

3. Enable FormsModule for Two-Way Binding

   • Import FormsModule and add it to imports[]:

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppComponent } from './app.component';
   import { UserProfileComponent } from './user-profile/user-profile.component';
   import { FormsModule } from '@angular/forms';
   
   @NgModule({
     declarations: [
       AppComponent,
       UserProfileComponent
     ],
     imports: [
       BrowserModule,
       FormsModule  // ✅ Add this line
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

4. Run and Test

   ng serve
   

   • Go to http://localhost:4200/
   • Click the Change Name button – The name should change to Jane Doe
   • Type in the input box – The name should update in real time!

---

4. Summary & Q&A (15 mins)

✅ What We Learned Today:
✔ Understanding Components & Templates
✔ Creating and Using Angular Components
✔ Different Types of Data Binding
✔ Hands-on with Interpolation, Property Binding, Event Binding & Two-Way Binding

Next Session: Directives, Pipes & Services 🚀

---

Would you like any modifications or additional examples? 😊