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

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.

{{ title }}

• 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.