Theory
Class और Screen कैसे Connected रहते हैं
एक Angular component के दो halves हैं: TypeScript CLASS (data और logic) और HTML TEMPLATE (view)। इन्हें बात करनी है: class का events array template में appear होना चाहिए, template में एक button click एक class method call करना चाहिए, एक typed name एक class property में flow करना चाहिए।
वह connection data binding है, और Angular के पास exactly FOUR kinds हैं, direction और एक memorable bracket syntax से distinguished। चार master कीजिए और आप किसी भी template को इसकी class से wire कर सकते हैं। Plus, आप elements को reusable behaviour add करने के लिए अपने खुद के CUSTOM directives लिख सकते हैं। यह lesson Angular का glue है।
At a glance
चार Data Bindings
| Binding | Syntax | Direction / काम |
|---|---|---|
| Interpolation | {{ event.name }} | Class से view: एक value display करना |
| Property binding | [disabled]="isFull" | Class से view: एक element property set करना |
| Event binding | (click)="register()" | View से class: एक action पर एक method चलाना |
| Two-way binding | [(ngModel)]="name" | दोनों ways: field और property को sync में रखना |
Theory
चार, और Banana in a Box
तीन bindings one-way हैं; चौथा इन्हें combine करता है:
- interpolation
{{ value }}: view में एक class value डालता है (text) - property binding
[prop]="value": class से एक element की PROPERTY set करता है ([disabled]="isFull") - event binding
(event)="method()": एक event fire होने पर एक class method चलाता है ((click)="register()") - two-way binding
[(ngModel)]="name": एक form field और एक class property को दोनों DIRECTIONS में sync में रखता है
Two-way syntax [()] को 'banana in a box' nickname दिया गया है (brackets के अंदर parentheses), और यह literally property binding [] PLUS event binding () combined है: यह property से field set करता है AND field बदलने पर property update करता है। इसे Angular के FormsModule की ज़रूरत है।
Practical
एक Template में सारे चार Bindings
<!-- Interpolation: display a class value -->
<h2>{{ event.name }}</h2>
<!-- Property binding: set an element property from the class -->
<button [disabled]="seats === 0">Register</button>
<!-- Event binding: run a class method on click -->
<button (click)="register()">Confirm</button>
<!-- Two-way binding: field and class property stay in sync -->
<input [(ngModel)]="name">
<p>Hello, {{ name }}</p> <!-- updates live as you type -->
<!-- A CUSTOM attribute directive adding behaviour: -->
<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" का magic यह है कि यह एक साथ TWO चीज़ें करता है: यह input में class का name DISPLAY करता है AND जब भी आप type करते हैं name UPDATE करता है। Field में type कीजिए और कहीं और {{ name }} तुरंत बदलता है, कोई manual onChange नहीं चाहिए।
React से compare करते हुए: वहाँ आपने value={name} (property) AND onChange={e => setName(...)} (event) को SEPARATELY wire किया, एक controlled component। Angular का two-way binding उन दोनों को एक [(ngModel)] में BUNDLE करता है। Same result, कम code, कुछ 'magic' की cost पर।
Custom directives आपको reusable element behaviour package करने देते हैं: @Directive से decorated एक class (जैसे appHighlight) जिसे आप किसी भी element पर attach करते हैं इसे consistent behaviour देने के लिए, built-in directives जैसा पर आपका खुद का।
Quiz
Angular का two-way binding [(ngModel)]="name" क्या करता है?
- सिर्फ़ field में name display करता है (one-way)
- Input field और class property 'name' को दोनों ways में sync में रखता है: field name दिखाता है, और type करना name update करता है
- सिर्फ़ एक button click होने पर name update करता है
- दो अलग variables को साथ bind करता है
Show the answer
Input field और class property 'name' को दोनों ways में sync में रखता है: field name दिखाता है, और type करना name update करता है
Two-way binding [(ngModel)]="name" form field और class property को दोनों DIRECTIONS में synchronise करती है: input name की current value display करता है, और input में type करना तुरंत name update करता है (जो कहीं और भी update होता है जहाँ name appear होता है)। यह literally property binding [ ] (class से view) plus event binding ( ) (view से class) combined है, इसलिए [()] 'banana in a box'। Option A सिर्फ़ one-way interpolation/property binding describe करता है। Option C सिर्फ़ एक event binding describe करता है। Option D इसे misread करता है (यह ONE property को एक field से bind करता है, दोनों ways)। यह वह bundle करता है जो React ने separate value + onChange से किया, एक single binding में।
Think first
Angular का Two-Way बनाम React के Controlled Components
React को एक form field के लिए value={name} AND onChange={e => setName(...)} चाहिए था। Angular इसे एक [(ngModel)]="name" से करता है। कौन सा 'बेहतर' है, और trade-off क्या है? फिर tap कीजिए।
Show the answer
कोई भी simply बेहतर नहीं है; ये convenience को explicitness से trade करते हैं। Angular का [(ngModel)] ज़्यादा CONVENIENT है: एक binding display-and-update दोनों करता है, कम code। React का controlled component ज़्यादा EXPLICIT है: आप value binding AND onChange update दोनों SEE करते हैं, तो data flow पूरी तरह visible है और आप exactly control करते हैं हर change पर क्या होता है (जैसे mid-type validate या transform करना)। Angular इसे 'magic' two-way sync में hide करता है; React इसे manual और transparent रखता है। Design philosophies अलग हैं: Angular built-in convenience favour करता है (यह एक full framework है), React explicit, predictable one-way flow favour करता है (यह एक minimal library है)। दोनों जानते हुए, आप appreciate कर सकते हैं कि two-way binding actually one-way property + one-way event combined है, चाहे कोई भी framework इसे spell करे।
Watch out
Binding Traps
Direction के लिए Wrong Bracket: {{}} display, [] property (in), () event (out), [()] two-way; syntax direction encode करता है।
FormsModule के बिना ngModel: [(ngModel)] fail होता है जब तक FormsModule imported न हो।
[prop] और (event) Confuse करना: brackets class से एक property set करते हैं; parentheses एक event पर एक method चलाते हैं।
Two-Way Binding Overuse करना: यह convenient है पर data flow hide करता है; reactive forms (अगले lessons) अक्सर complex forms के लिए clearer होते हैं।
Custom Directive Naming: built-ins से clash avoid करने के लिए custom directives (appHighlight) prefix कीजिए।
Theory
Binding हो गई; अब Display पर Transform कीजिए
आप class और template के बीच data को हर direction में bind कर सकते हैं। अक्सर आप सिर्फ़ display के लिए एक value TRANSFORM करना चाहते हैं, एक date format करना, एक title uppercase करना, एक currency दिखाना, underlying data बदले बिना। Angular के PIPES exactly वही करते हैं, और आप custom वाले लिख सकते हैं। अगला lesson built-in और custom pipes cover करता है, फिर forms और services Angular unit complete करते हैं।
Summary
Key takeaways
- Data binding component class और इसके template को connect करता है; Angular के पास four kinds हैं।
- Interpolation {{ value }}: एक class value display करता है (class से view)।
- Property binding [prop]="value": class से एक element property set करता है (class से view)।
- Event binding (event)="method()": एक user action पर एक class method चलाता है (view से class)।
- Two-way binding [(ngModel)]="x": एक field और property को दोनों ways sync में रखता है (property + event combined; FormsModule चाहिए)।
- Custom directives (@Directive) reusable element behaviour package करते हैं, आपके अपने attribute directives जैसे।
- Memory hook: {{}} दिखाता है, [] in set करता है, () out भेजता है, [()] दोनों ways sync करता है।