Basics
Components — Basics
Building Blocks Of Angular
💡 Component ek LEGO block hai — apni khud ki shape/color (template + style) aur behavior (logic) rakhta hai, aur doosre LEGO blocks ke saath combine hokar ek bada structure (poora application) banata hai.
Component Angular ka FUNDAMENTAL building block hai — @Component decorator se define hota hai. selector batata hai component ko HTML mein KAISE use karna hai (jaise <app-hello></app-hello>). template (ya templateUrl) HTML define karta hai. Class ke andar properties/methods component ka DATA aur BEHAVIOR hain.
import { Component } from '@angular/core';
@Component({
selector: 'app-greeting',
templateUrl: './greeting.component.html',
styleUrls: ['./greeting.component.css']
})
export class GreetingComponent {
userName = 'Aarav';
greet() {
console.log('Hello, ' + this.userName);
}
}
// greeting.component.html:
// <h1>Welcome, {{ userName }}!</h1>
// <button (click)="greet()">Greet</button>
// Kisi doosre component mein use karna:
// <app-greeting></app-greeting>🧩
Component ek LEGO block hai — apni khud ki shape/color (template + style) aur behavior (logic) rakhta hai, aur doosre LEGO blocks ke saath combine hokar ek bada structure (poora application) banata hai.
1 / 6
⚡ Quick Recap
- @Component decorator = component ki metadata define karta hai
- selector = HTML mein component ko kaise use karna hai
- Class properties/methods = component ka data + behavior
Is page mein (2 subtopics)
Bade applications mein components ek TREE structure banate hain — parent components apne template mein child components use karte hain, jaise HTML tags nest hote hain. Ye "composition" Angular applications ka core pattern hai.
// app.component.html (parent):
// <app-header></app-header>
// <app-main-content></app-main-content>
// <app-footer></app-footer>
// Har ek (header, main-content, footer) apna khud ka
// component hai, apni khud ki logic/template ke saathTip: Ye pattern React ke component tree jaisa hi concept hai — bade UI ko chhote, reusable, independently-testable pieces mein todना, jo phir combine hokar poora application banate hain.
Har component ki CSS DEFAULT se sirf USI component tak limited rehti hai ("view encapsulation") — ek component ki styles doosre components ko accidentally affect nahi karti, chahe class names same hon.
// header.component.css:
// h1 { color: blue; }
// footer.component.css:
// h1 { color: red; } — DIFFERENT h1, koi conflict nahi!
// Angular automatically unique attributes add karta hai
// (jaise _ngcontent-xyz) taaki styles scope raheinTip: Ye encapsulation CSS naming conflicts (jaise BEM convention manually follow karna) ki zaroorat bahut kam kar deta hai — Angular automatically scope handle kar deta hai, detail Component Deep Dive category mein aayega.