एंगुलर में एक मॉडल डायलॉग कैसे दिखाएं

वेब अनुप्रयोगों में मोडल संवादों का उपयोग करना काफी आम है। चाहे आप किसी भिन्न पृष्ठ पर नेविगेट किए बिना तालिका में किसी रिकॉर्ड को संपादित करना चाहते हों, कुछ डेटा देखना चाहते हों, या बस अपने उपयोगकर्ताओं को एक चेतावनी संदेश दिखाना चाहते हों, मोडल डायलॉग का उपयोग करना एक बेहतरीन उपयोगकर्ता अनुभव हो सकता है। दुर्भाग्य से, एंगुलर में थर्ड-पार्टी लाइब्रेरी के बिना ऐसा करना बहुत आसान नहीं है। इसके लिए कुछ गैर-तुच्छ कोड लिखने और कोणीय ढांचे के आंतरिक तंत्र की समझ की आवश्यकता होती है। यही कारण है कि हमने एंगुलर में मोडल डायलॉग दिखाने के लिए डेवलपर पार्टनर्स में एक लाइब्रेरी विकसित की है। हम इस लेख में अपनी लाइब्रेरी का उपयोग करने जा रहे हैं।

1. लाइब्रेरी स्थापित करें

हमें एनपीएम के माध्यम से अपनी @डेवलपर-पार्टनर/एनजीएक्स-मोडल-डायलो जी लाइब्रेरी स्थापित करनी होगी और इसका उपयोग करने में सक्षम होने के लिए इसे अपने एंगुलर मॉड्यूल में शामिल करना होगा। इसे स्थापित करने के लिए एनपीएम कमांड यहां दी गई है:

एनपीएम @डेवलपर-पार्टनर/एनजीएक्स-मोडल-डायलॉग इंस्टॉल करें

इसके बाद, हमें इसे एंगुलर मॉड्यूल में शामिल करना होगा जहां हमें मोडल डायलॉग का उपयोग करना होगा। हमारा डेमो एप्लिकेशन बहुत छोटा है, इसमें केवल एक मॉड्यूल है जिसे AppModule कहा जाता है। हमें अपने AppModule Angular मॉड्यूल के आयात सरणी में लाइब्रेरी से ModalModule को शामिल करना होगा:

हम तैयार हैं। हम अपने एप्लिकेशन में मोडल डायलॉग घटक का उपयोग शुरू कर सकते हैं।

2. एक मॉडल संवाद दिखाएँ

जैसा कि पहले उल्लेख किया गया है, जब हम अपनी पुस्तकों की सूची में कोई पुस्तक जोड़ना या संपादित करना चाहते हैं तो हम अपना मोडल डायलॉग दिखाने जा रहे हैं। आइए पहले एक घटक बनाएं जहां हम पुस्तकों की सूची दिखाने जा रहे हैं। हम एक नया Angular घटक बनाने जा रहे हैं और इसे BookListComponent नाम देंगे।

यह BookListComponent टाइपस्क्रिप्ट वर्ग की सामग्री है:

हमारा BookListComponent वर्ग सरलता के लिए हमारी तालिका में डेटा दिखाने के लिए पुस्तकों की एक हार्डकोडेड सूची का उपयोग करता है। मोडल डायलॉग दिखाने में सक्षम होने के लिए इसे ngx-modal-dialog लाइब्रेरी से ModalService Angular सेवा की भी आवश्यकता होती है, इसीलिए हमने इसे अपने कंस्ट्रक्टर में इंजेक्ट किया है।

इसके बाद, हम BookListComponent के लिए HTML फ़ाइल बनाएंगे जहां हम HTML तालिका में पुस्तकों की सूची दिखाएंगे:

उपरोक्त HTML कोड बहुत सरल है. यह एक तालिका में पुस्तकों की सूची दिखाता है। इसमें "नई पुस्तक जोड़ें" नामक एक बटन भी है।

अब तक का यूआई इस प्रकार दिखता है:

जब "नई पुस्तक जोड़ें" बटन पर क्लिक किया जाता है, तो यह हमारे टाइपस्क्रिप्ट वर्ग में createBook फ़ंक्शन को कॉल करता है। क्रिएटबुक फ़ंक्शन हमारी तालिका में एक नई पुस्तक जोड़ने के लिए मोडल डायलॉग दिखाता है। यह createBook फ़ंक्शन का टाइपस्क्रिप्ट कोड है:

createBook फ़ंक्शन ModalService क्लास के शो फ़ंक्शन को कॉल करके मोडल डायलॉग दिखाता है। शो फ़ंक्शन 2 पैरामीटर लेता है: मोडल डायलॉग के अंदर दिखाने के लिए कोणीय घटक का वर्ग और मोडल डायलॉग के विकल्प जो डायलॉग की सेटिंग्स हैं जैसे शीर्षक, आकार, स्थिति और कुछ अन्य चीजें। मोडल डायलॉग को अपने मुख्य भाग में दिखाने के लिए एक कोणीय घटक की आवश्यकता होती है। उस घटक के बिना, हमारा मोडल डायलॉग स्क्रीन पर ओवरले करने वाला एक खाली पैनल मात्र होगा। वह घटक CreateEditBookComponent है जो ऊपर स्क्रीनशॉट में शो फ़ंक्शन का पहला पैरामीटर है।

CreateEditBookComponent Angular घटक पुस्तकों को जोड़ने और संपादित करने दोनों के लिए जिम्मेदार होगा। हम नई पुस्तकें जोड़ने के लिए कोड पर काम करके शुरुआत करेंगे। यहां CreateEditBookComponent का HTML कोड है जिसमें उस पुस्तक की आईडी और शीर्षक दर्ज करने के लिए केवल कुछ फ़ील्ड हैं जिन्हें हम बनाना चाहते हैं और संवाद बंद करने और डेटा सहेजने के लिए बटन हैं:

मोडल डायलॉग यूआई इस प्रकार दिखता है:

यहाँ CreateEditBookComponent घटक का टाइपस्क्रिप्ट कोड है:

CreateEditBookComponent घटक ModalReference नामक एक Angular सेवा का उपयोग करता है एनजीएक्स-मोडल-संवाद पुस्तकालय। हम उस सेवा का उपयोग उस मोडल डायलॉग के साथ इंटरैक्ट करने के लिए करते हैं जहां हमारा घटक रखा जाता है जैसे कि मोडल को बंद करना या उसके इवेंट की सदस्यता लेना। हम उपरोक्त स्क्रीनशॉट में कैंसिल फ़ंक्शन में मोडल डायलॉग को बंद कर देते हैं। जब HTML से "रद्द करें" बटन पर क्लिक किया जाता है तो हम कैंसल फ़ंक्शन को कॉल करते हैं। जब हम HTML कोड में "सेव" बटन पर क्लिक करते हैं, तो यह फॉर्म सबमिट करता है जो सेवडेटा फ़ंक्शन को कॉल करता है। सेवडेटा फ़ंक्शन में, हम कैंसिल फ़ंक्शन की तरह ही मोडल डायलॉग को बंद कर देते हैं, लेकिन हम इसमें बुक प्रॉपर्टी भी पास कर देते हैं, जिसमें हमारी सूची में एक नई पुस्तक जोड़ने के लिए डेटा होता है।

ModalReference सेवा एक सामान्य प्रकार है। जब हम ModalReference सेवा के क्लोजसक्सेस फ़ंक्शन को कॉल करते हैं, तो हमें उसी प्रकार के ऑब्जेक्ट को उसके सामान्य पैरामीटर के रूप में पास करना होगा। हमारे मामले में, यह एक टाइपस्क्रिप्ट इंटरफ़ेस है जिसे Book कहा जाता है। जिस पैरामीटर को हम क्लोजसक्सेस फ़ंक्शन में पास करते हैं, वह उस घटक को वापस भेज दिया जाता है जिसने मॉडल सर्विस क्लास के शो फ़ंक्शन को कॉल करके मोडल डायलॉग बनाया है।

जब ModalReference सेवा के क्लोज़सक्सेस फ़ंक्शन को कॉल किया जाता है, तो यह मोडल डायलॉग को बंद कर देता है और उस इवेंट के ग्राहकों को नई बनाई गई पुस्तक को पास करते हुए एक RxJS इवेंट को ट्रिगर करता है। ऊपर दिए गए स्क्रीनशॉट में, हमारे कॉलबैक फ़ंक्शन का न्यूबुक पैरामीटर नई बनाई गई पुस्तक है जो हमें मोडल डायलॉग से प्राप्त हुई है, इसलिए हम इसे यूआई में दिखाने के लिए बस इसे अपनी किताबों की सरणी में जोड़ते हैं।

3. मॉडल डायलॉग्स को डेटा पास करना

ऐसे कुछ मामले हैं जहां आपको कुछ डेटा को मोडल डायलॉग में पास करने की आवश्यकता होती है। उदाहरण के लिए, यदि हम सूची से किसी पुस्तक को संपादित करना चाहते हैं, तो हम उस पुस्तक रिकॉर्ड को मोडल डायलॉग में पास कर सकते हैं जिसे हम संपादित करना चाहते हैं ताकि प्रारंभिक डेटा प्राप्त हो सके जिसे हम संशोधित करना चाहते हैं।

आइए पंक्ति डेटा को संपादित करने के लिए तालिका पंक्तियों में एक बटन जोड़कर प्रारंभ करें:

तालिका की प्रत्येक पंक्ति में संपादन बटन के साथ यूआई इस प्रकार दिखता है:

एडिटबुक फ़ंक्शन में केवल एक महत्वपूर्ण अंतर के साथ क्रिएटबुक फ़ंक्शन के समान ही कोड होता है। यह उस पुस्तक को पास करता है जिसे हम संवाद विकल्पों की मॉडल संपत्ति का उपयोग करके मोडल संवाद में संपादित करना चाहते हैं।

मॉडल प्रॉपर्टी का उपयोग करके हम जिस पैरामीटर को मोडल डायलॉग में पास करते हैं, वह डायलॉग के अंदर उपयोग किए जाने वाले घटक में इसके config.model प्रॉपर्टी के माध्यम से ModalReference सेवा में उपलब्ध हो जाता है।

ऊपर दिए गए स्क्रीनशॉट में, हम पारित पैरामीटर की प्रतिलिपि बना रहे हैं और इसे CreateEditBookComponent घटक की पुस्तक प्रॉपर्टी में असाइन कर रहे हैं। ModalReference.config ऑब्जेक्ट की मॉडल संपत्ति संदर्भ द्वारा पारित की जाती है, इसलिए उस ऑब्जेक्ट के गुणों में हम जो भी परिवर्तन करते हैं वह तालिका में प्रतिबिंबित होगा जहां हम पुस्तकों की सूची दिखाते हैं। हम इसे कॉपी क्यों करते हैं इसका कारण तालिका में पंक्ति को तब तक संशोधित नहीं करना है जब तक उपयोगकर्ता "सहेजें" बटन पर क्लिक नहीं करता। यदि उपयोगकर्ता "रद्द करें" बटन पर क्लिक करता है, तो तालिका डेटा अपडेट नहीं किया जाएगा।

पुस्तक संपादित करें मोडल संवाद इस प्रकार दिखता है:

निष्कर्ष

शुरुआत से एंगुलर के लिए एक मोडल डायलॉग बनाना आसान नहीं है, लेकिन हमारी मोडल डायलॉग लाइब्रेरी के साथ यह बहुत आसान है। हमने लाइब्रेरी को कैसे सेट अप करें और अपने प्रोजेक्ट में मोडल डायलॉग दिखाने के लिए इसका उपयोग कैसे करें, इसके बारे में जाना। हमने संवादों के अधिकांश बुनियादी उपयोग के मामलों और सुविधाओं का अध्ययन किया, लेकिन @डेवलपर-पार्टनर्स/एनजीएक्स-मोडल-डायलॉग लाइब्रेरी में कई अन्य विशेषताएं हैं जो आपको अपनी वास्तविक परियोजनाओं में उपयोगी लग सकती हैं।

कृपया इसके बारे में अधिक जानने के लिए नीचे दिए गए लिंक का अनुसरण करें:

@डेवलपर-पार्टनर/एनजीएक्स-मोडल-डायलॉग

यदि आप अपने मोडल संवादों में एक अच्छा लोडिंग स्पिनर दिखाना चाहते हैं, तो कृपया एंगुलर में लोडिंग स्पिनर बनाने के बारे में हमारा लेख देखें:

एंगुलर में लोडिंग स्पिनर कैसे बनाएं