Theory
Class અને પડદો કઈ રીતે જોડાયેલા રહે છે
Angular ના component ના બે અડધિયાં હોય છે: TypeScript CLASS (data અને logic) અને HTML TEMPLATE (view). એ બંનેએ એકબીજા સાથે વાત કરવી પડે છે: class ના events array એ template માં દેખાવું જોઈએ, template માં થયેલો button click એ class ની કોઈ method બોલાવવો જોઈએ, અને લખાયેલું નામ class ની property સુધી પહોંચવું જોઈએ.
એ જોડાણ એટલે data binding, અને Angular માં એના બરાબર ચાર પ્રકાર છે, જે દિશા પ્રમાણે અને યાદ રહી જાય એવા કૌંસના syntax પ્રમાણે અલગ પડે છે. આ ચાર પર પકડ આવી જાય એટલે તમે કોઈ પણ template ને એના class સાથે જોડી શકો. એ ઉપરાંત તમે તમારાં પોતાનાં CUSTOM directives લખીને elements માં ફરી ફરી વાપરી શકાય એવું વર્તન ઉમેરી શકો છો. આ પાઠ Angular નો ગુંદર છે.
At a glance
ચાર data bindings
| Binding | Syntax | દિશા / કામ |
|---|---|---|
| Interpolation | {{ event.name }} | Class થી view: કિંમત બતાવવી |
| Property binding | [disabled]="isFull" | Class થી view: element ની property ગોઠવવી |
| Event binding | (click)="register()" | View થી class: ક્રિયા થાય ત્યારે method ચલાવવો |
| Two-way binding | [(ngModel)]="name" | બંને દિશામાં: field અને property ને sync માં રાખવાં |
Theory
ચાર bindings, અને પેટીમાં કેળું
એમાંથી ત્રણ bindings એક દિશાનાં છે; ચોથું એ ત્રણમાંનાં બેને ભેગાં કરે છે:
- interpolation
{{ value }}: class ની કિંમતને view માં (લખાણ તરીકે) મૂકે છે - property binding
[prop]="value": class માંથી element ની PROPERTY ગોઠવે છે ([disabled]="isFull") - event binding
(event)="method()": event થાય ત્યારે class નો method ચલાવે છે ((click)="register()") - two-way binding
[(ngModel)]="name": form field અને class ની property ને બંને દિશામાં sync માં રાખે છે
Two-way વાળા [()] syntax નું હુલામણું નામ 'banana in a box' છે, એટલે કે પેટીમાં કેળું (ચોરસ કૌંસની અંદર ગોળ કૌંસ), અને એ ખરેખર તો property binding [] વત્તા event binding () બંને ભેગાં જ છે: એ property માંથી field ગોઠવે છે અને field બદલાય ત્યારે property પણ બદલી નાખે છે. એના માટે Angular નું FormsModule જોઈએ.
Practical
Template માં ચારેય bindings
<!-- Interpolation: class ની કિંમત બતાવો -->
<h2>{{ event.name }}</h2>
<!-- Property binding: class માંથી element ની property ગોઠવો -->
<button [disabled]="seats === 0">Register</button>
<!-- Event binding: click થાય ત્યારે class નો method ચલાવો -->
<button (click)="register()">Confirm</button>
<!-- Two-way binding: field અને class ની property sync માં રહે છે -->
<input [(ngModel)]="name">
<p>Hello, {{ name }}</p> <!-- તમે લખો એમ તરત બદલાય છે -->
<!-- વર્તન ઉમેરતું CUSTOM attribute directive: -->
<p appHighlight>Featured event</p>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
Two-way binding, અને custom directives
[(ngModel)]="name" નો જાદુ એ છે કે એ એકસાથે બે કામ કરે છે: class ના name ને input માં DISPLAY કરે છે અને તમે લખો એ સાથે જ name ને UPDATE પણ કરે છે. Field માં લખો એટલે બીજે ક્યાંય રહેલું {{ name }} તરત બદલાઈ જાય, હાથે onChange લખવાની જરૂર જ નહીં.
React સાથે સરખાવો: ત્યાં તમે value={name} (property) અને onChange={e => setName(...)} (event) અલગ અલગ જોડતા હતા, એટલે કે controlled component. Angular નું two-way binding એ બંનેને એક જ [(ngModel)] માં બાંધી દે છે. પરિણામ એ જ, code ઓછો, પણ થોડા 'જાદુ' ની કિંમતે.
Custom directives તમને elements નું ફરી વાપરી શકાય એવું વર્તન એક જગ્યાએ બાંધી દેવા દે છે: @Directive થી શણગારેલો એક class (દાખલા તરીકે appHighlight) જેને તમે કોઈ પણ element સાથે જોડીને એને એકસરખું વર્તન આપી શકો, બરાબર built-in directives જેવું જ, પણ તમારું પોતાનું.
Quiz
Angular નું two-way binding [(ngModel)]="name" શું કરે છે?
- ફક્ત field માં name બતાવે છે (એક દિશામાં)
- input field અને class ની property 'name' ને બંને દિશામાં sync માં રાખે છે: field માં name દેખાય છે, અને લખવાથી name બદલાય છે
- ફક્ત button click થાય ત્યારે જ name બદલે છે
- બે જુદા જુદા variables ને એકબીજા સાથે બાંધે છે
Show the answer
input field અને class ની property 'name' ને બંને દિશામાં sync માં રાખે છે: field માં name દેખાય છે, અને લખવાથી name બદલાય છે
Two-way binding [(ngModel)]="name" form field અને class ની property ને બંને દિશામાં એકસરખાં રાખે છે: input માં name ની હાલની કિંમત દેખાય છે, અને input માં લખતાં જ name તરત બદલાય છે (અને એથી name જ્યાં જ્યાં દેખાતું હોય ત્યાં પણ બદલાય છે). એ ખરેખર તો property binding [ ] (class થી view) વત્તા event binding ( ) (view થી class) બંને ભેગાં જ છે, એટલે જ એને [()] એટલે કે 'banana in a box' કહે છે. વિકલ્પ A ફક્ત એક દિશાના interpolation કે property binding ને વર્ણવે છે. વિકલ્પ C એકલા event binding ને વર્ણવે છે. વિકલ્પ D ખોટો અર્થ કાઢે છે (એ એક જ property ને field સાથે, બંને દિશામાં બાંધે છે). React માં જે કામ અલગ અલગ value અને onChange થી થતું હતું, એ અહીં એક જ binding માં બંધાઈ જાય છે.
Think first
Angular નું two-way સામે React ના controlled components
React માં એક form field માટે value={name} અને onChange={e => setName(...)} બંને જોઈતાં હતાં. Angular એ જ કામ એક [(ngModel)]="name" થી કરે છે. કયું 'સારું' કહેવાય, અને એની કિંમત શું ચૂકવવી પડે છે? વિચારીને પછી tap કરો.
Show the answer
બેમાંથી કોઈ સીધેસીધું સારું નથી; બંને સગવડ અને સ્પષ્ટતા વચ્ચે સોદો કરે છે. Angular નું [(ngModel)] વધુ સગવડભર્યું છે: એક જ binding બતાવવાનું અને બદલવાનું બંને કરી લે છે, code ઓછો લખવો પડે. React નું controlled component વધુ સ્પષ્ટ છે: તમને value નું binding અને onChange નું update બંને દેખાય છે, એટલે data નો પ્રવાહ પૂરેપૂરો દેખાય છે અને દરેક ફેરફારે બરાબર શું થાય એ તમારા હાથમાં રહે છે (જેમ કે લખાતું હોય ત્યારે જ validate કરવું કે રૂપાંતર કરવું). Angular એ વાત 'જાદુઈ' two-way sync માં સંતાડી દે છે; React એને હાથમાં અને પારદર્શક રાખે છે. બંનેની રચનાદ્રષ્ટિ જુદી છે: Angular અંદરથી મળતી સગવડને પસંદ કરે છે (એ આખું framework છે), જ્યારે React સ્પષ્ટ અને અંદાજ બાંધી શકાય એવા એક દિશાના પ્રવાહને પસંદ કરે છે (એ નાનકડી library છે). બંને જાણો એટલે સમજાય કે two-way binding ખરેખર તો એક દિશાનું property વત્તા એક દિશાનું event જ છે, ભલે કોઈ પણ framework એને ગમે તે રીતે લખે.
Watch out
Binding ની ભૂલો
દિશા માટે ખોટો કૌંસ: {{}} બતાવે, [] property (અંદર), () event (બહાર), [()] બંને દિશામાં; syntax જ દિશા કહી દે છે.
FormsModule વગર ngModel: FormsModule import કર્યા વગર [(ngModel)] નિષ્ફળ જાય છે.
[prop] અને (event) ની ગૂંચવણ: ચોરસ કૌંસ class માંથી property ગોઠવે છે; ગોળ કૌંસ event પર method ચલાવે છે.
Two-way binding નો અતિરેક: એ સગવડભર્યું છે પણ data નો પ્રવાહ સંતાડી દે છે; અઘરાં forms માટે reactive forms (હવે પછીના પાઠ) ઘણી વાર વધુ સ્પષ્ટ પડે છે.
Custom directive નું નામ: built-in directives સાથે ટકરાય નહીં એ માટે તમારાં directives ને prefix આપો (appHighlight).
Theory
Binding પતી ગયું; હવે બતાવતી વખતે રૂપાંતર
હવે તમે class અને template વચ્ચે દરેક દિશામાં data બાંધી શકો છો. ઘણી વાર તમારે કિંમતને ફક્ત બતાવવા પૂરતી બદલવી હોય છે, જેમ કે તારીખને ઢાળમાં ગોઠવવી, શીર્ષકને મોટા અક્ષરે કરવું કે ચલણ સાથે બતાવવું, પણ મૂળ data ને અડ્યા વગર. Angular ના PIPES બરાબર એ જ કામ કરે છે, અને તમે તમારા પોતાના pipes પણ લખી શકો છો. હવે પછીનો પાઠ built-in અને custom pipes શીખવે છે, અને પછી forms તથા services Angular નું આ unit પૂરું કરે છે.
Summary
Key takeaways
- Data binding component ના class ને એના template સાથે જોડે છે; Angular માં એના ચાર પ્રકાર છે.
- Interpolation {{ value }}: class ની કિંમત બતાવે છે (class થી view).
- Property binding [prop]="value": class માંથી element ની property ગોઠવે છે (class થી view).
- Event binding (event)="method()": વપરાશકારની ક્રિયા પર class નો method ચલાવે છે (view થી class).
- Two-way binding [(ngModel)]="x": field અને property ને બંને દિશામાં sync માં રાખે છે (property વત્તા event ભેગાં; FormsModule જોઈએ).
- Custom directives (@Directive) elements નું ફરી વાપરી શકાય એવું વર્તન બાંધી આપે છે, એટલે કે તમારાં પોતાનાં attribute directives.
- યાદ રાખવાની કડી: {{}} બતાવે, [] અંદર ગોઠવે, () બહાર મોકલે, [()] બંને દિશામાં sync કરે.