Angular में द्वि-दिशात्मक डेटा बाइंडिंग

Angular में यह संभव है कि इनपुट में टेक्स्ट दर्ज करने पर, यह टेक्स्ट स्वचालित रूप से क्लास की प्रॉपर्टी में आ जाए। इसे द्वि-दिशात्मक डेटा बाइंडिंग कहा जाता है।

इस बाइंडिंग को काम करने के लिए, सबसे पहले इसे सक्षम करना आवश्यक है। इसके लिए कंपोनेंट फाइल में FormsModule इम्पोर्ट करें:

app/app.component.tsimport { FormsModule } from '@angular/forms';

और फिर @Component डेकोरेटर की imports प्रॉपर्टी में जोड़ें:

app/app.component.ts@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, UserComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

इसके बाद द्वि-दिशात्मक डेटा बाइंडिंग सक्षम हो जाएगी और हम इसका उपयोग कर सकते हैं। आइए इसे implement करते हैं।

सबसे पहले एक क्लास प्रॉपर्टी डिक्लेयर करें, जिसे हम बाद में द्वि-दिशात्मक बाइंडिंग के लिए उपयोग करेंगे:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

मान लीजिए हमारे पास एक div और एक input है। div में क्लास की कोई प्रॉपर्टी डिस्प्ले होती है:

html<div>
  {{ text }}
</div>
<input>

आइए हमारी text प्रॉपर्टी को इनपुट के परिवर्तन से बांधते हैं। इसके लिए इनपुट में एक विशेष डायरेक्टिव [(ngModel)] लिखनी होगी, जिसका मान हमारी क्लास की प्रॉपर्टी होगी:

html<div>
  {{ text }}
</div>
<input [(ngModel)]="text">

अब, यदि कोड रन करें और इनपुट में टेक्स्ट टाइप करना शुरू करें, तो यह टेक्स्ट तुरंत div में डिस्प्ले होने लगेगा।