Theory
Vह Class जो एक Screen बनती है
Angular में, FestConnect का events page एक component है: एक TypeScript class जो events data और logic hold करता है, PLUS एक HTML template जो इन्हें display करता है। @Component decorator दोनों को साथ glue करता है।
पर एक component की एक LIFE होती है: यह create होता है, initialise होता है, दिखाया जाता है, update होता है, और आख़िर में destroy होता है। Angular आपको उन moments में hook करने देता है, और एक hook, ngOnInit, वह है जहाँ लगभग सारा real work शुरू होता है (events fetch करने जैसा)। यह lesson components create करना और इनके lifecycle hooks cover करता है, दूसरा एक favourite exam topic और beginner bugs का एक genuine source है।
Theory
एक Component की Anatomy
एक component @Component से decorated एक class है, जो 3 चीज़ों को link करता है:
- selector: वह custom HTML tag जो इसे render करता है (
<app-events>) - template (या templateUrl): HTML view
- styleUrls: इसका CSS
CLASS data hold करता है (events की एक list) और methods; TEMPLATE इन्हें display करता है। आप ng generate component events से एक component create करते हैं, जो सारी files scaffold करता है और इसे register करता है।
तो एक Angular component class + template + styles है, इसके selector से bundled और नाम दिया गया। इसे render करने के लिए इसका selector tag किसी दूसरे component के template में रखिए।
Practical
ngOnInit वाला एक Component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-events',
template: '<p>{{ events.length }} events loaded</p>'
})
export class EventsComponent implements OnInit {
events: string[] = [];
// Constructor: keep it LIGHT, mainly for dependency injection.
constructor(private eventService: EventService) {}
// ngOnInit: runs ONCE after the component is initialised.
// THE place for setup like fetching data.
ngOnInit(): void {
this.events = this.eventService.getEvents();
}
}
At a glance
Key Lifecycle Hooks (Order में)
| Hook | यह कब चलता है | इसके लिए इस्तेमाल कीजिए |
|---|---|---|
| ngOnChanges | जब एक @Input property बदलती है | बदले हुए inputs पर react करना |
| ngOnInit | एक बार, component initialised होने के बाद | Initialization: data fetch करना, setup (सबसे-इस्तेमाल होने वाला) |
| ngAfterViewInit | View (template) render होने के बाद | Rendered DOM चाहने वाला work |
| ngOnDestroy | Component destroy होने से ठीक पहले | Cleanup: unsubscribe, timers clear करना |
Quiz
एक component का data fetch करने वाला code (FestConnect के events load करने जैसा) आपको कहाँ रखना चाहिए?
- Constructor में, क्योंकि यह पहले चलता है
- ngOnInit में, वह lifecycle hook जो component initialised होने के बाद एक बार चलता है (constructor light रहना चाहिए, mainly DI के लिए)
- ngOnDestroy में
- Template के HTML में
Show the answer
ngOnInit में, वह lifecycle hook जो component initialised होने के बाद एक बार चलता है (constructor light रहना चाहिए, mainly DI के लिए)
Data fetching और initialization ngOnInit में belong करते हैं, जिसे Angular ONCE call करता है component setup होने और इसके inputs available होने के बाद: exactly सही moment। CONSTRUCTOR (option A) LIGHT रहना चाहिए और dependency injection के लिए meant है, HTTP calls जैसे heavy work के लिए नहीं; वहाँ data fetching करना discouraged है (inputs ready नहीं हो सकते, और यह testing complicate करता है)। ngOnDestroy (option C) component के जाते समय CLEANUP के लिए है, life का opposite end। Option D logic को view से confuse करता है। Convention: dependencies inject करने के लिए constructor, initialization के लिए ngOnInit। यह React के useEffect(() => {...}, []) को mirror करता है जो mount पर एक बार चलता है।
Think first
ngOnInit और React का useEffect
React (Unit 2) में आपने events को useEffect(() => {...}, []) से fetch किया। Angular इन्हें ngOnInit में fetch करता है। ये दोनों same idea कैसे हैं? फिर tap कीजिए।
Show the answer
ये SAME role play करते हैं: 'यह setup code ONCE चलाओ, जब component ready हो, इसके first render/initialization के बाद'। React का useEffect एक empty dependency array [] के साथ mount पर एक बार चलता है; Angular का ngOnInit component initialised होने के बाद एक बार चलता है। दोनों data fetching जैसे initialization के लिए designated home हैं, ताकि heavy work construction/render के दौरान न हो। Frameworks mechanism में अलग हैं (एक hook बनाम एक class पर एक lifecycle method) पर PATTERN पर agree करते हैं: 'ready होने पर set up करो' को constructor/render से separate करना। इस equivalence को पहचानना मतलब है आप अपनी React knowledge से पहले से Angular की lifecycle समझते हैं: ngOnInit Angular clothing में useEffect-on-mount HAI। अलग framework, same lifecycle instinct।
Watch out
Component और Lifecycle Traps
Constructor में Heavy Work: इसे light रखिए (सिर्फ़ DI); fetching/setup ngOnInit में कीजिए।
Interface Implement करना भूलना: implements OnInit और ngOnInit() add कीजिए; एक misspelt hook name silently कभी नहीं चलता।
ngOnDestroy में कोई Cleanup नहीं: वहाँ Observables से unsubscribe कीजिए और timers clear कीजिए, नहीं तो आप leak करते हैं।
ngOnInit में View Expect करना: rendered DOM सिर्फ़ ngAfterViewInit से guaranteed है, ngOnInit से नहीं।
Selector Clashes: हर component का selector unique होना चाहिए।
Theory
Components जीते हैं; अब इन्हें बात करने दीजिए
आप components create कर सकते हैं और इनके lifecycle में initialization चला सकते हैं। पर real apps में components को COMMUNICATE करना पड़ता है: एक parent एक child को data pass करता हुआ, एक child अपने parent को notify करता हुआ। अगला lesson component communication (@Input, @Output, EventEmitter) और Angular के DIRECTIVES (ngIf, ngFor, ngClass) cover करता है, जो control करते हैं templates lists और conditions कैसे render करते हैं, उन React patterns के Angular equivalents जो आप पहले से जानते हैं।
Summary
Key takeaways
- एक component एक TypeScript class है @Component से decorated, एक selector (custom tag), एक template (HTML), और styles को link करते हुए।
- ng generate component name से components create कीजिए; इसके selector tag के through एक render कीजिए।
- Lifecycle hooks वे methods हैं जो Angular key moments पर call करता है: ngOnChanges, ngOnInit, ngAfterViewInit, ngOnDestroy।
- ngOnInit initialization के बाद एक बार चलता है: setup और data fetching के लिए THE जगह।
- Constructor light रखिए (mainly dependency injection); heavy work ngOnInit में कीजिए।
- ngOnDestroy cleanup के लिए है (unsubscribe, timers clear करना) component destroy होने से पहले।
- Memory hook: ngOnInit Angular का on-mount setup है, React के useEffect(() => {}, []) जैसा।