Week 4 Day 1: Created and structured Angular components

Week-4/Day-1/angular-components.md

@@ -0,0 +1,51 @@
+## 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.