51 lines
1.4 KiB
Markdown
51 lines
1.4 KiB
Markdown
## 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. |