📘 Day 2 — Mastering Angular Components, Templates & Data Binding

Hands-on Angular tutorial — Part of the Zero to Hero Series

Welcome to Day 2, where we dig into the heart of Angular:

✔️ Components
✔️ Templates
✔️ Data binding
✔️ Events
✔️ Inputs & outputs
✔️ Signals in components

Today, you’ll understand how Angular actually builds UI, and you’ll build three interactive components to practice.

Ready? Let’s code! 🚀

🟦 What You Will Build Today

By the end of this tutorial, you’ll build:

1️⃣ A ProfileCard component
2️⃣ A Counter component (with signals)
3️⃣ A Two-way binding demo
4️⃣ Parent ↔ Child communication

All in real Angular code, no theory-only fluff.

🟧 1. What is a Component?

A component is basically:

HTML template
TypeScript logic
Styling
Metadata (@Component decorator)

In modern Angular (15+), ALL new components should be standalone:

✔️ No NgModules
✔️ Cleaner structure
✔️ Faster builds
✔️ Better routing
✔️ Angular 20 best practice

Let’s create one!

🟩 2. Creating Your First Standalone Component

Run:

ng generate component profile-card --standalone

Angular creates:

profile-card.component.ts
profile-card.component.html
profile-card.component.scss

By default, Angular does NOT auto-import your component into AppComponent. (Standalone components = no module to declare them in!)

We will do that next.

🟨 3. Understanding Component Anatomy

Open profile-card.component.ts. You should see something like:

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

@Component({
  selector: 'app-profile-card',
  standalone: true,
  templateUrl: './profile-card.component.html',
  styleUrl: './profile-card.component.scss'
})
export class ProfileCardComponent {}

Breakdown:

Section	Meaning
`selector`	HTML tag to use the component
`standalone`	Tells Angular this component has no module
`templateUrl`	HTML file
`styleUrl`	SCSS/CSS file

Now let’s add content.

🟫 4. Building the ProfileCard Component

Open: profile-card.component.html

Replace with:

<div class="card">
  <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" />
  <h2>{{ name }}</h2>
  <p>{{ role }}</p>
</div>

Now update the TS logic:

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

@Component({
  selector: 'app-profile-card',
  standalone: true,
  templateUrl: './profile-card.component.html',
  styleUrl: './profile-card.component.scss'
})
export class ProfileCardComponent {
  name = 'Sarah Connor';
  role = 'Angular Developer';
}

Add some simple CSS:

.card {
  width: 220px;
  padding: 16px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  text-align: center;
}
img {
  border-radius: 50%;
  margin-bottom: 12px;
}

🟦 5. Display the Component in AppComponent

Open: app.component.ts

Add the component to imports:

import { Component } from '@angular/core';
import { ProfileCardComponent } from './profile-card/profile-card.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ProfileCardComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {}

Now use the component in the template:

app.component.html:

<h1>Day 2: Components & Data Binding</h1>

<app-profile-card></app-profile-card>

Refresh → You should see a beautiful profile card ✔️

🟩 6. Data Binding (Core of Angular Templates)

Angular supports 4 primary data-binding types:

Interpolation (one-way: TS → HTML)
```
{{ username }}
```
Property Binding
```
<img [src]="imageUrl" />
```

Event Binding

<button (click)="doSomething()">Click</button>

Two-way Binding
```
<input [(ngModel)]="username" />
```

Let’s practice them all.

🟥 7. Build a Counter Component (Signals Version)

Generate:

ng generate component counter --standalone

Replace content:

counter.component.ts

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

@Component({
  selector: 'app-counter',
  standalone: true,
  templateUrl: './counter.component.html'
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(c => c + 1);
  }

  decrement() {
    this.count.update(c => c - 1);
  }
}

counter.component.html

<h3>Counter: {{ count() }}</h3>

<button (click)="decrement()">-</button>
<button (click)="increment()">+</button>

Now import the component:

app.component.ts:

imports: [ProfileCardComponent, CounterComponent]

Use it:

app.component.html:

<app-profile-card></app-profile-card>
<app-counter></app-counter>

Now you have two working components!

🟦 8. Two-way Binding Demo (Inputs + Text)

Generate:

ng generate component message-editor --standalone

message-editor.component.ts

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-message-editor',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './message-editor.component.html'
})
export class MessageEditorComponent {
  message = signal('Hello Angular!');
}

message-editor.component.html

<input [(ngModel)]="message()" />

<p>You typed: {{ message() }}</p>

Import it and use it:

app.component.ts:

imports: [ProfileCardComponent, CounterComponent, MessageEditorComponent]

Template:

<app-message-editor></app-message-editor>

🟩 9. Parent → Child Communication (Inputs)

Update ProfileCard to accept data:

profile-card.component.ts

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

@Component({
  selector: 'app-profile-card',
  standalone: true,
  templateUrl: './profile-card.component.html',
  styleUrl: './profile-card.component.scss'
})
export class ProfileCardComponent {
  name = input<string>('Default User');
  role = input<string>('Frontend Developer');
}

Use it:

<app-profile-card
  [name]="'Luke Skywalker'"
  [role]="'Jedi Master'"
></app-profile-card>

🟫 10. Child → Parent Communication (Outputs)

Generate:

ng generate component emoji-picker --standalone

emoji-picker.component.ts

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

@Component({
  selector: 'app-emoji-picker',
  standalone: true,
  templateUrl: './emoji-picker.component.html'
})
export class EmojiPickerComponent {
  choose = output<string>();

  sendEmoji(emoji: string) {
    this.choose.emit(emoji);
  }
}

emoji-picker.component.html

<button (click)="sendEmoji('😁')">😁</button>
<button (click)="sendEmoji('🤔')">🤔</button>
<button (click)="sendEmoji('🔥')">🔥</button>

Use it in AppComponent:

app.component.ts (logic)

selectedEmoji = signal('🙂');

updateEmoji(e: string) {
  this.selectedEmoji.set(e);
}

app.component.html

<h2>Selected Emoji: {{ selectedEmoji() }}</h2>

<app-emoji-picker (choose)="updateEmoji($event)"></app-emoji-picker>

Boom ✔️ Real parent → child → parent communication.

🎉 End of Day 2 — What You Learned

Today was big. You learned:

✔️ Creating standalone components
✔️ Component structure
✔️ Template syntax
✔️ Signals inside components
✔️ Property binding
✔️ Event binding
✔️ Two-way binding
✔️ Input & Output communication
✔️ Passing data between components

This is 80% of Angular’s foundation. You’re doing amazing.

🧪 Day 2 Challenge

Build a component called:

👉 user-status

Features:

Accept username as input
Accept online (boolean) as input
Show:

John Doe — Online 🟢 OR John Doe — Offline 🔴
Add a toggle button in AppComponent to flip status
Use signals for state