Theory
એવો class જે screen બની જાય છે
Angular માં FestConnect નું events વાળું પાનું એટલે component: એવો TypeScript class જે events નો data અને logic સાચવે છે, અને એની સાથે એવું HTML template જે એમને બતાવે છે. @Component decorator બંનેને એકસાથે ચોંટાડે છે.
પણ component ને પોતાનું જીવન હોય છે: એ બને છે, શરૂ થાય છે, દેખાય છે, બદલાય છે, અને છેવટે નાશ પામે છે. Angular તમને એ ક્ષણો સાથે જોડાવા દે છે, અને એમાંનો એક hook, એટલે કે ngOnInit, ત્યાં જ લગભગ બધું ખરું કામ શરૂ થાય છે (જેમ કે events મંગાવવા). આ પાઠ components બનાવવાનું અને એમના lifecycle hooks આવરી લે છે, અને એમાં બીજું તો પરીક્ષાનો પ્રિય વિષય પણ છે અને શરૂઆત કરનારાઓની ભૂલોનું ખરું કારણ પણ.
Theory
Component ની રચના
Component એ @Component થી ચિહ્નિત કરેલો class છે, જે ત્રણ વસ્તુઓ જોડે છે:
- selector: એને render કરતું ખાસ HTML tag (
<app-events>) - template (કે templateUrl): HTML વાળું દૃશ્ય
- styleUrls: એનું CSS
CLASS data (events ની યાદી) અને methods સાચવે છે; TEMPLATE એમને બતાવે છે. Component તમે ng generate component events થી બનાવો છો, જે બધી files ઊભી કરે છે અને એની નોંધણી પણ કરી દે છે.
એટલે Angular નું component એટલે class અને template અને styles, જે એકસાથે બંધાયેલાં હોય અને એના selector થી ઓળખાય. એને 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: એને હળવો રાખો, મુખ્યત્વે dependency injection માટે.
constructor(private eventService: EventService) {}
// ngOnInit: component શરૂ થયા પછી એક જ વાર ચાલે છે.
// data મંગાવવા જેવી ગોઠવણ માટેની આ જ સાચી જગ્યા છે.
ngOnInit(): void {
this.events = this.eventService.getEvents();
}
}
At a glance
મુખ્ય lifecycle hooks (ક્રમમાં)
| Hook | ક્યારે ચાલે છે | શેના માટે વાપરવો |
|---|---|---|
| ngOnChanges | @Input વાળો ગુણ બદલાય ત્યારે | બદલાયેલા inputs પ્રમાણે પ્રતિભાવ આપવા |
| ngOnInit | Component શરૂ થયા પછી એક જ વાર | શરૂઆતની ગોઠવણ: data મંગાવવો, તૈયારી કરવી (સૌથી વધુ વપરાતો) |
| ngAfterViewInit | દૃશ્ય (template) render થઈ ગયા પછી | એવું કામ જેને render થયેલું DOM જોઈએ |
| ngOnDestroy | Component નાશ પામે એની બરાબર પહેલાં | સફાઈ: unsubscribe કરવું, timers બંધ કરવા |
Quiz
Component નો data મંગાવતો code (જેમ કે FestConnect ના events load કરવા) ક્યાં મૂકવો જોઈએ?
- Constructor માં, કારણ કે એ સૌથી પહેલાં ચાલે છે
- ngOnInit માં, એટલે કે એવા lifecycle hook માં જે component શરૂ થયા પછી એક જ વાર ચાલે છે (constructor હળવો રહેવો જોઈએ, મુખ્યત્વે DI માટે)
- ngOnDestroy માં
- Template ના HTML માં
Show the answer
ngOnInit માં, એટલે કે એવા lifecycle hook માં જે component શરૂ થયા પછી એક જ વાર ચાલે છે (constructor હળવો રહેવો જોઈએ, મુખ્યત્વે DI માટે)
Data મંગાવવો અને શરૂઆતની ગોઠવણ ngOnInit માં હોવાં જોઈએ, જેને Angular component તૈયાર થયા પછી અને એનાં inputs મળી ગયા પછી એક જ વાર બોલાવે છે: એટલે કે બરાબર યોગ્ય ક્ષણે. CONSTRUCTOR (વિકલ્પ A) હળવો રહેવો જોઈએ અને એ dependency injection માટે છે, HTTP calls જેવા ભારે કામ માટે નહીં; ત્યાં data મંગાવવો ટાળવા જેવું છે (inputs તૈયાર ન પણ હોય, અને પરીક્ષણ પણ અઘરું બને). ngOnDestroy (વિકલ્પ C) component જાય ત્યારે સફાઈ માટે છે, એટલે કે જીવનના સામા છેડે. વિકલ્પ D logic ને દૃશ્ય સાથે ભેળવી દે છે. રિવાજ આ છે: dependencies inject કરવા માટે constructor, અને શરૂઆતની ગોઠવણ માટે ngOnInit. React ના useEffect(() => {...}, []) નું mount વખતે એક જ વાર ચાલવું આનો જ પડઘો છે.
Think first
ngOnInit અને React નું useEffect
React (એકમ 2) માં તમે events ને useEffect(() => {...}, []) વડે મંગાવતા હતા. Angular એમને ngOnInit માં મંગાવે છે. આ બંને એક જ વિચાર કઈ રીતે છે? વિચારીને પછી tap કરો.
Show the answer
બંને એક જ ભૂમિકા ભજવે છે: 'આ ગોઠવણનો code એક જ વાર ચલાવો, જ્યારે component તૈયાર થાય, એટલે કે એના પહેલા render કે શરૂઆત પછી'. React નું useEffect ખાલી dependency array [] સાથે mount વખતે એક જ વાર ચાલે છે; Angular નું ngOnInit component શરૂ થયા પછી એક જ વાર ચાલે છે. બંને data મંગાવવા જેવી શરૂઆતની ગોઠવણ માટેનું ઠરાવેલું ઘર છે, જેથી ભારે કામ બાંધકામ કે render દરમિયાન ન થાય. બંને frameworks ની પદ્ધતિ જુદી છે (hook સામે class પરની lifecycle method) પણ રીત પર બંને સંમત છે: 'તૈયાર થાય ત્યારે ગોઠવવું' ને constructor કે render થી અલગ રાખવું. આ સમાનતા ઓળખી લો એટલે તમારા React ના જ્ઞાનથી Angular નું lifecycle તમે પહેલેથી સમજી ગયા છો: ngOnInit એટલે Angular ના પોશાકમાં mount વખતનું useEffect. Framework જુદું, પણ lifecycle ની સૂઝ એની એ જ.
Watch out
Component અને lifecycle ના ફાંદા
Constructor માં ભારે કામ: એને હળવો રાખો (ફક્ત DI); data મંગાવવો અને ગોઠવણ ngOnInit માં કરો.
Interface લાગુ કરવાનું ભૂલી જવું: implements OnInit લખો અને ngOnInit() ઉમેરો; hook નું નામ ખોટું લખાય તો એ ચૂપચાપ કદી ચાલતું જ નથી.
ngOnDestroy માં સફાઈ ન કરવી: Observables માંથી unsubscribe કરો અને timers ત્યાં જ બંધ કરો, નહીં તો leak થાય.
ngOnInit માં દૃશ્યની અપેક્ષા: render થયેલા DOM ની ખાતરી ફક્ત ngAfterViewInit આપે છે, ngOnInit નહીં.
Selector ટકરાવા: દરેક component નું selector અનન્ય હોવું જોઈએ.
Theory
Components જીવે છે; હવે એમને વાત કરવા દો
તમે components બનાવી શકો છો અને એમના lifecycle માં શરૂઆતની ગોઠવણ ચલાવી શકો છો. પણ ખરી apps માં components ને એકબીજા સાથે વાત કરવી પડે છે: માતાપિતા બાળકને data આપે, અને બાળક પોતાના માતાપિતાને જાણ કરે. પછીનો પાઠ component વચ્ચેના સંવાદ (@Input, @Output, EventEmitter) અને Angular ના DIRECTIVES (ngIf, ngFor, ngClass) આવરી લે છે, જે templates માં યાદીઓ અને શરતો કઈ રીતે render થાય એ નક્કી કરે છે, અને એ તમે પહેલેથી જાણતા હો એવી React ની રીતોના Angular વાળા સમકક્ષ છે.
Summary
Key takeaways
- Component એ @Component થી ચિહ્નિત કરેલો TypeScript class છે, જે selector (ખાસ tag), template (HTML) અને styles ને જોડે છે.
- Components ને ng generate component name થી બનાવો; અને કોઈ પણ component ને એના selector વાળા tag દ્વારા render કરો.
- Lifecycle hooks એવી methods છે જેમને Angular મુખ્ય ક્ષણોએ બોલાવે છે: ngOnChanges, ngOnInit, ngAfterViewInit અને ngOnDestroy.
- ngOnInit શરૂઆત પછી એક જ વાર ચાલે છે: ગોઠવણ અને data મંગાવવા માટેની આ જ સાચી જગ્યા છે.
- Constructor ને હળવો રાખો (મુખ્યત્વે dependency injection); ભારે કામ ngOnInit માં કરો.
- ngOnDestroy component નાશ પામે એ પહેલાં સફાઈ માટે છે (unsubscribe કરવું, timers બંધ કરવા).
- યાદ રાખવાની કડી: ngOnInit એ Angular માં mount વખતની ગોઠવણ છે, બરાબર React ના useEffect(() => {}, []) જેવી.