कोणीय 2 - डेटा बाइंडिंग
टू-वे बाइंडिंग एंगुलर जेएस में एक कार्यक्षमता थी, लेकिन एंगुलर 2.x से हटा दिया गया है। लेकिन अब, एंगुलर 2 में कक्षाओं की घटना के बाद से, हम एंगुलरजेएस वर्ग में गुणों से बंध सकते हैं।
मान लीजिए यदि आपके पास एक वर्ग नाम के साथ एक वर्ग है, तो एक संपत्ति जिसमें एक प्रकार और मूल्य था।
export class className {
property: propertytype = value;
}
तब आप एक html टैग की संपत्ति को वर्ग की संपत्ति से बांध सकते हैं।
<html tag htmlproperty = 'property'>
संपत्ति का मूल्य तब html के htmlproperty को सौंपा जाएगा।
आइए एक उदाहरण देखें कि हम डेटा बाइंडिंग को कैसे प्राप्त कर सकते हैं। हमारे उदाहरण में, हम उन चित्रों को प्रदर्शित करेंगे जिनमें चित्र स्रोत हमारी कक्षा में गुणों से आएंगे। इसे प्राप्त करने के लिए निम्नलिखित चरण हैं।
Step 1- कोई भी 2 चित्र डाउनलोड करें। इस उदाहरण के लिए, हम नीचे दिखाए गए कुछ सरल चित्र डाउनलोड करेंगे।
Step 2 - इन इमेज को नामक फोल्डर में स्टोर करें Imagesएप्लिकेशन निर्देशिका में। यदि चित्र फ़ोल्डर मौजूद नहीं है, तो कृपया इसे बनाएं।
Step 3 नीचे दिए गए अनुसार app.component.ts में निम्न सामग्री जोड़ें।
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
appTitle: string = 'Welcome';
appList: any[] = [ {
"ID": "1",
"url": 'app/Images/One.jpg'
},
{
"ID": "2",
"url": 'app/Images/Two.jpg'
} ];
}
Step 4 - नीचे दिखाए गए अनुसार app.component.html में निम्न सामग्री जोड़ें।
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>
उपरोक्त app.component.html फ़ाइल में, हम अपनी कक्षा में मौजूद गुणों से छवियों को एक्सेस कर रहे हैं।
उत्पादन
उपरोक्त कार्यक्रम का आउटपुट इस तरह होना चाहिए -