## Building Angular Components

### Introduction
Components are the core building blocks of Angular applications. Every visible part of an Angular application is controlled by a component. Understanding components deeply is essential for building scalable and maintainable applications.

### What is an Angular Component?
A component consists of:
- TypeScript class – handles logic
- HTML template – defines UI
- CSS file – styles the UI
- Decorator (@Component) – connects all parts

### Creating a Component Using Angular CLI
ng generate component header

This command automatically creates:
- header.component.ts
- header.component.html
- header.component.css
- header.component.spec.ts

### Component Structure (Understanding in Detail)

### TypeScript File
- Contains component logic
- Uses @Component decorator
- Controls data binding

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})

### Data Binding in Components
- Interpolation
Used to display data in HTML.
<h1>{{ title }}</h1>

- Property Binding
Used to bind values to HTML attributes.
<img [src]="imagePath">

### Practical Work Done
- Created multiple components
- Used interpolation and property binding
- Linked components inside root component
- Practiced component reusability

### Learning Outcome
Gained a clear understanding of how Angular components work internally and how they form the UI structure.