Angular में द्वि-दिशात्मक डेटा बाइंडिंग
Angular में यह संभव है कि इनपुट में टेक्स्ट दर्ज करने पर, यह टेक्स्ट स्वचालित रूप से क्लास की प्रॉपर्टी में आ जाए। इसे द्वि-दिशात्मक डेटा बाइंडिंग कहा जाता है।
इस बाइंडिंग को काम करने के लिए, सबसे पहले इसे सक्षम करना
आवश्यक है। इसके लिए कंपोनेंट फाइल में FormsModule
इम्पोर्ट करें:
import { FormsModule } from '@angular/forms';
और फिर @Component डेकोरेटर की imports
प्रॉपर्टी में जोड़ें:
@Component({
selector: 'app-root',
standalone: true,
imports: [FormsModule, UserComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
इसके बाद द्वि-दिशात्मक डेटा बाइंडिंग सक्षम हो जाएगी और हम इसका उपयोग कर सकते हैं। आइए इसे implement करते हैं।
सबसे पहले एक क्लास प्रॉपर्टी डिक्लेयर करें, जिसे हम बाद में द्वि-दिशात्मक बाइंडिंग के लिए उपयोग करेंगे:
export class AppComponent {
public text: string = '';
}
मान लीजिए हमारे पास एक div और एक input है। div में क्लास की कोई प्रॉपर्टी डिस्प्ले होती है:
<div>
{{ text }}
</div>
<input>
आइए हमारी text प्रॉपर्टी को इनपुट के
परिवर्तन से बांधते हैं। इसके लिए इनपुट में
एक विशेष डायरेक्टिव [(ngModel)] लिखनी होगी,
जिसका मान हमारी क्लास की प्रॉपर्टी होगी:
<div>
{{ text }}
</div>
<input [(ngModel)]="text">
अब, यदि कोड रन करें और इनपुट में टेक्स्ट टाइप करना शुरू करें, तो यह टेक्स्ट तुरंत div में डिस्प्ले होने लगेगा।
एक इनपुट और एक पैराग्राफ दिया गया है। इनपुट में एक नंबर डिस्प्ले होता है। ऐसा करें कि इनपुट में नंबर डालने पर, पैराग्राफ में उस नंबर का वर्ग डिस्प्ले हो।
दो इनपुट और एक पैराग्राफ दिए गए हैं। इनपुट में नंबर डाले जाते हैं। ऐसा करें कि पैराग्राफ में डाले गए नंबरों का योग डिस्प्ले हो।
