आप अपने कोणीय प्रोजेक्ट में HTML में निर्देश जोड़ सकते हैं। कुछ आपके मार्कअप की संरचना को नियंत्रित करते हैं जबकि अन्य विशेषताओं पर ध्यान केंद्रित करते हैं।
यह लेख छह सबसे आम कोणीय निर्देशों के माध्यम से जाएगा: ngFor, ngIf, ngClass, ngStyle, ngModel, और ngSwitch।
कोणीय निर्देश क्या हैं?
कोणीय निर्देश आपको if कथनों और लूप के लिए उपयोग करने की अनुमति देते हैं, और एक कोणीय परियोजना के HTML कोड में अन्य व्यवहार जोड़ते हैं।
| आदेश | विवरण |
|---|---|
| *एनजीआईएफ | आप ngIf का उपयोग तब कर सकते हैं जब आप चाहते हैं कि कुछ HTML ब्लॉक केवल तभी प्रदर्शित हों जब वे एक निश्चित शर्त को पूरा करते हों। उदाहरण के लिए, यदि आपके पास पॉप-अप वाला कोई प्रपत्र है जो किसी उपयोगकर्ता द्वारा किसी निश्चित फ़ील्ड के लिए इनपुट दर्ज करने के बाद प्रदर्शित होता है। |
| *एनजीफोर | यदि आपको कई बार दोहराने के लिए एक निश्चित ब्लॉक की आवश्यकता है तो आप ngFor का उपयोग कर सकते हैं। उदाहरण के लिए, यदि आपके पास वस्तुओं की एक सूची है और प्रत्येक आइटम के लिए एक div प्रदर्शित करने की आवश्यकता है। |
| *एनजीक्लास | यह कक्षा का उपयोग करके सशर्त स्टाइल जोड़ता है। यदि कोई if-statement शर्त को पूरा करता है, तो वह निर्दिष्ट वर्ग को लागू करेगा। |
| *एनजी स्टाइल | यह सशर्त इन-लाइन स्टाइल जोड़ता है। यदि कोई if-statement शर्त को पूरा करता है, तो यह निर्दिष्ट शैलियों को लागू करेगा। |
| *एनजीमॉडल | यह आपको टू-वे बाइंडिंग करने की अनुमति देता है। इसका मतलब है कि आप HTML और टाइपस्क्रिप्ट फ़ाइल के बीच दोनों दिशाओं में डेटा पास कर सकते हैं। उदाहरण के लिए, आप टाइपस्क्रिप्ट फ़ाइल से HTML फ़ाइल में एक विशेषता का मान पास कर सकते हैं, और इसके विपरीत। |
| *एनजीस्विच | यह आपको कई मानों की जांच करने के लिए कई मामलों के साथ एक स्विच स्टेटमेंट जोड़ने की अनुमति देता है। मामलों के आधार पर, कुछ HTML तत्व दिखाई देंगे। |
संरचनात्मक निर्देशों में HTML तत्वों की संरचना शामिल होती है। इनमें ngIf, ngFor और ngSwitch शामिल हैं। विशेषता निर्देशों में HTML तत्वों के गुणों को बदलना शामिल है। इनमें ngStyle, ngClass और ngModel शामिल हैं।
एनजीआईएफ. का उपयोग कैसे करें
एनजीआईएफ का उपयोग करने के लिए, आपको किसी विशेष HTML तत्व को दिखाने के लिए सत्य का मूल्यांकन करने के लिए एक शर्त की आवश्यकता होगी।
- अपनी टाइपस्क्रिप्ट फ़ाइल में दो चर जोड़ें। इस उदाहरण में, प्लेलिस्ट को स्टोर करने के लिए एक नोप्लेलिस्ट वैरिएबल और एक वेरिएबल है। यदि प्लेलिस्ट सरणी की लंबाई 0 है, तो यह चर सत्य का मूल्यांकन करेगा।
नोप्लेलिस्ट: बूलियन = झूठा;
प्लेलिस्ट: कोई भी = [];कंस्ट्रक्टर () { }
ngOnInit (): शून्य {
अगर (यह। प्लेलिस्ट। लंबाई 0) {
this.no प्लेलिस्ट = सच;
}
} - HTML में, *ngIf स्टेटमेंट जोड़ें। यदि कोई प्लेलिस्ट सत्य नहीं है, तो नीचे दी गई अवधि में निहित त्रुटि संदेश दिखाई देगा। नहीं तो नहीं होगा। आप विभिन्न प्रकार के एनजीआईएफ को लागू कर सकते हैं एचटीएमएल टैग.
कोई प्लेलिस्ट उपलब्ध नहीं है।
- if-statement में "else" घटक जोड़ने के लिए, आपको एक टेम्पलेट ब्लॉक में "else" भाग के लिए HTML कोड जोड़ना होगा।
कोई प्लेलिस्ट उपलब्ध नहीं है।
प्लेलिस्ट मिलीं।
एनजीफोर का उपयोग कैसे करें
यदि आपको किसी पृष्ठ पर एक निश्चित संख्या में ब्लॉक दोहराने की आवश्यकता है, तो आप ngFor निर्देश का उपयोग कर सकते हैं।
- टाइपस्क्रिप्ट फ़ाइल में, ऐरे में आइटम जोड़ें।
प्लेलिस्ट: कोई भी = [
{"नाम": "रॉक", "नंबरऑफसॉन्ग्स": 5},
{"नाम": "समकालीन", "नंबरऑफसॉन्ग": 9},
{"नाम": "लोकप्रिय", "नंबरऑफसॉन्ग": 14},
{"नाम": "ध्वनिक", "नंबरऑफसॉन्ग": 3},
{"नाम": "शादी के गाने", "नंबरऑफसॉन्ग": 25},
{"नाम": "धातु", "नंबरऑफसॉन्ग": 0},
]; - HTML फ़ाइल में, *ngFor स्टेटमेंट जोड़ें।
ngFor के अंदर, आप "प्लेलिस्ट" चर का उपयोग करके सरणी में प्रत्येक ऑब्जेक्ट को संदर्भित करने में सक्षम होंगे। "playlist.name" और "playlist.numberOfSongs" दोनों विशेषताओं को के भीतर प्रिंट करेंगे टैग।प्लेलिस्ट मिलीं।
{{प्लेलिस्ट.नाम}}
{{playlist.numberOfSongs}} गाने
एनजीक्लास का उपयोग कैसे करें
आप किसी शर्त के आधार पर स्टाइलिंग क्लास को बदल सकते हैं जिसका उपयोग कोई विशेष div करता है।
- विभिन्न शैलियों के साथ सीएसएस फ़ाइल में दो वर्ग जोड़ें। आप किसी भी प्रकार का जोड़ सकते हैं सीएसएस स्टाइलिंग आप चाहते हैं, जैसे विभिन्न पृष्ठभूमि रंग।
गाने {
पृष्ठभूमि-रंग: #F7F5F2;
}
.noSongs {
पृष्ठभूमि-रंग: #FFA8A8;
} - पिछले चरण से फॉर-लूप के भीतर, ngClass विशेषता निर्देश जोड़ें। [ngClass]="playlist.numberOfSongs> 0? 'songs': 'noSongs'" उसी का उपयोग कर रहा है टर्नरी ऑपरेटर कि जावास्क्रिप्ट और अन्य भाषाओं का उपयोग करते हैं।
यदि गानों की संख्या शून्य से अधिक है, तो यह "गाने" वर्ग को div पर लागू करेगा। यह डिव को एक ग्रे बैकग्राउंड कलर देगा। अन्यथा, यदि गानों की संख्या शून्य है, तो यह "noSongs" वर्ग को div पर लागू करेगा। यह div को एक लाल पृष्ठभूमि रंग देगा।
{{प्लेलिस्ट.नाम}}
{{playlist.numberOfSongs}} गाने
एनजी स्टाइल का उपयोग कैसे करें
ngClass का उपयोग करने के बजाय, आप ngStyle का उपयोग कर सकते हैं यदि आप किसी वर्ग के माध्यम से स्टाइल करने के बजाय इन-लाइन स्टाइल लागू करना चाहते हैं।
- इसके बजाय ngStyle का उपयोग करने के लिए ngClass को पिछले चरण से बदलें।
{{प्लेलिस्ट.नाम}}
{{playlist.numberOfSongs}} गाने
[ngStyle]="{'background-color': प्लेलिस्ट.नंबरऑफसॉन्ग्स> 0? '#F7F5F2': '#FFA8A8', 'color': प्लेलिस्ट.नंबरऑफसॉन्ग > 0? 'ब्लैक': 'डार्कब्लू'}"
एनजीमॉडल का उपयोग कैसे करें
आप दो-तरफ़ा बाइंडिंग के लिए ngModel का उपयोग कर सकते हैं। इसका मतलब है कि आप एचटीएमएल और टाइपस्क्रिप्ट दोनों फाइलों के बीच एक विशेषता के मूल्य को पारित कर सकते हैं।
उदाहरण के लिए, मान लें कि आपके पास HTML फ़ाइल में एक इनपुट तत्व है जो ngModel का उपयोग करता है। ngModel विशेषता टाइपस्क्रिप्ट फ़ाइल में एक चर के लिए बाध्य है। जब आप इनपुट में कोई मान दर्ज करते हैं, तो यह टाइपस्क्रिप्ट फ़ाइल में वेरिएबल को अपडेट कर देगा।
टाइपस्क्रिप्ट फ़ाइल में विशेषता में किए गए परिवर्तन HTML में भी दिखाई देंगे यदि अन्य div उस चर का उपयोग कर रहे हैं।
- App.module.ts में, FormsModule को फ़ाइल के शीर्ष पर इंपोर्ट में और इंपोर्ट ऐरे में भी जोड़ें।
आयात { FormsModule } '@angular/forms' से;
@NgModule({
आयात: [
...
प्रपत्रमॉड्यूल
]
}) - जब उपयोगकर्ता किसी प्लेलिस्ट का नाम बदल रहा हो, तो इसका ट्रैक रखने के लिए टाइपस्क्रिप्ट फ़ाइल में एक विशेषता जोड़ें।
प्लेलिस्ट का नाम बदलना: बूलियन = झूठा; - प्लेलिस्ट को परिवर्तनीय सार्वजनिक बनाएं ताकि HTML फ़ाइल में ngModel का उपयोग करते समय इसे एक्सेस किया जा सके।
सार्वजनिक प्लेलिस्ट: कोई भी = [
...
]; - HTML फ़ाइल में दो बटन जोड़ें, जो आपको प्रत्येक प्लेलिस्ट का नाम बदलने या नाम बदलने को रद्द करने की अनुमति देगा।
- प्रत्येक प्लेलिस्ट के डिव के अंदर एक इनपुट बॉक्स जोड़ें। इनपुट केवल तभी दिखाई देगा जब आप पर क्लिक करेंगे प्लेलिस्ट का नाम बदलें बटन। इस इनपुट बॉक्स में "playlist.name" के लिए बाध्य एक ngModel होगा।
जब आप इनपुट बॉक्स में एक नया नाम दर्ज करते हैं, तो टाइपस्क्रिप्ट फ़ाइल में प्लेलिस्ट.नाम अपडेट हो जाएगा। इसके बाद यह HTML फ़ाइल में अन्य डिव को भी अपडेट करेगा जो प्लेलिस्ट.नाम का उपयोग करते हैं।
एनजीस्विच का उपयोग कैसे करें
आप स्विच केस में मामलों के आधार पर कुछ तत्वों को प्रदर्शित करने के लिए ngSwitch का उपयोग कर सकते हैं।
- प्लेलिस्ट सरणी के अंदर ऑब्जेक्ट में एक नई "रेटिंग" विशेषता जोड़ें। यह विशेषता 0 और 5 (समावेशी) के बीच कोई भी संख्या हो सकती है।
सार्वजनिक प्लेलिस्ट: कोई भी = [
{"नाम": "रॉक", "नंबरऑफसॉन्ग": 5, "रेटिंग": 5},
{"नाम": "समकालीन", "नंबरऑफसॉन्ग": 9, "रेटिंग": 1},
{"नाम": "लोकप्रिय", "नंबरऑफसॉन्ग": 14, "रेटिंग": 5},
{"नाम": "ध्वनिक", "नंबरऑफसॉन्ग": 3, "रेटिंग": 4},
{"नाम": "शादी के गाने", "नंबरऑफसॉन्ग": 25, "रेटिंग": 5},
{"नाम": "धातु", "नंबरऑफसॉन्ग": 0, "रेटिंग": 0},
]; - प्लेलिस्ट के लिए नाम और गानों की संख्या के नीचे एक स्विच केस जोड़ें। प्लेलिस्ट के लिए रेटिंग संख्या के आधार पर, प्लेलिस्ट सितारों की सही संख्या दिखाएगी।
{{प्लेलिस्ट.नाम}}
{{playlist.numberOfSongs}} गाने
★★★★★★★★★★★★★★★कोई रेटिंग नहीं
कोणीय के साथ अधिक सीखना
अब आपने कोणीय निर्देशों की मूल बातें सीख ली हैं, जिसमें ngIf, ngFor, ngClass, ngStyle, ngModel और ngSwitch का उपयोग करना शामिल है। अधिक जटिल यूजर इंटरफेस बनाने के लिए आप उन्हें जोड़ सकते हैं। आपके लिए एंगुलर के बारे में जानने और सीखने के लिए बहुत कुछ है, चाहे आप शुरुआती हों या उन्नत स्तर पर।
शुरुआती और उन्नत उपयोगकर्ताओं के लिए शीर्ष 8 कोणीय पाठ्यक्रम
आगे पढ़िए
संबंधित विषय
- प्रोग्रामिंग
- प्रोग्रामिंग
- जावास्क्रिप्ट
- एचटीएमएल
- सीएसएस
लेखक के बारे में
शर्लिन एमयूओ में टेक राइटर हैं और सॉफ्टवेयर डेवलपमेंट में भी पूर्णकालिक काम करती हैं। उसके पास आईटी स्नातक है और उसे गुणवत्ता आश्वासन और विश्वविद्यालय शिक्षण में पिछला अनुभव है। शर्लिन को गेमिंग और पियानो बजाना बहुत पसंद है।
हमारे समाचार पत्र के सदस्य बनें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें