1.4 KiB
1.4 KiB
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.