Week 4 Day 1: Created and structured Angular components

Week-4/Day-1/Reame.md

@@ -0,0 +1,35 @@
+# Week 4 – Day 1: Angular Components
+
+## Date
+05 January 2026
+
+## Objective
+To understand the concept of Angular components and learn how to create, structure, and reuse components in an Angular application.
+
+## Topics Covered
+- Introduction to Angular Components
+- Component Architecture
+- @Component Decorator
+- Component Files (TS, HTML, CSS)
+- Data Binding (Interpolation & Property Binding)
+- Component Communication (Basics)
+
+## Activities Performed
+- Created multiple Angular components using Angular CLI
+- Analyzed the structure of generated component files
+- Implemented interpolation and property binding
+- Embedded child components into the root component
+- Practiced modular UI design using reusable components
+
+## Tools & Technologies Used
+- Angular
+- TypeScript
+- HTML
+- CSS
+- Angular CLI
+
+## Learning Outcome
+Gained a strong understanding of Angular component architecture and how components form the foundation of Angular applications.
+
+## Status
+Completed

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.