Angular Academy · पाठ

@if से सशर्त रेंडरिंग

@if और @else से सामग्री सशर्त रूप से दिखाएँ।

पाठ 1, कुल 4 में से13 चरण

@if से सशर्त रेंडरिंग, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

अंतर्निर्मित नियंत्रण प्रवाह

आधुनिक Angular टेम्पलेट में at-चिह्न से लिखे गए अंतर्निर्मित नियंत्रण प्रवाह ब्लॉक शामिल होते हैं। ये पुराने संरचनात्मक डायरेक्टिव का स्थान लेते हैं और इनके लिए किसी इम्पोर्ट की आवश्यकता नहीं होती।

if ब्लॉक

at-if ब्लॉक शर्त के आधार पर सामग्री रेंडर करता है। इसमें at-चिह्न के बाद if शब्द, कोष्ठक में शर्त और घुंघराले कोष्ठकों में सामग्री लिखी जाती है।

// template:
// @if (loggedIn) {
//   <p>Welcome back!</p>
// }

ngIf का स्थान लेना

यह पुराने *ngIf संरचनात्मक डायरेक्टिव का स्थान लेता है। नया सिंटैक्स टेम्पलेट भाषा का हिस्सा है, इसलिए कुछ भी इम्पोर्ट करने की आवश्यकता नहीं है।

शर्त में सिग्नल पढ़ना

शर्त कोई भी expression हो सकती है, जिसमें signal कॉल भी शामिल है।

// @if (count() > 0) {
//   <p>You have items</p>
// }

else ब्लॉक

जब शर्त गलत होती है, तब at-else ब्लॉक वैकल्पिक सामग्री दिखाता है। यह if ब्लॉक के बंद घुंघराले कोष्ठक के तुरंत बाद आता है।

// @if (user) {
//   <p>Hello {{ user.name }}</p>
// } @else {
//   <p>Please log in</p>
// }

else if श्रृंखलाएँ

आप at-else if का उपयोग करके शर्तों को श्रृंखला में जोड़ सकते हैं और अंत में at-else लिख सकते हैं।

// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }

शर्त का परिणाम सहेजना

at-if ब्लॉक as कीवर्ड की सहायता से शर्त के परिणाम को स्थानीय variable में बाँध सकता है। यह non-null संकुचन के लिए उपयोगी है।

// @if (user(); as u) {
//   <p>{{ u.name }}</p>
// }

नया सिंटैक्स क्यों

अंतर्निर्मित नियंत्रण प्रवाह संरचनात्मक डायरेक्टिव की तुलना में अधिक पठनीय, प्रकार-जाँचा हुआ और कुशल है। यह पुराने डायरेक्टिव के माइक्रोसिंटैक्स और तारक से बचता है।

कंटेनर एलिमेंट की आवश्यकता नहीं

पुराने तरीकों के विपरीत, at-if ब्लॉक के लिए रैपर एलिमेंट या ng-template की आवश्यकता नहीं होती। घुंघराले कोष्ठक ही सशर्त सामग्री की सीमा निर्धारित करते हैं।

ब्लॉक को नेस्ट करना

नियंत्रण प्रवाह ब्लॉक को स्वतंत्र रूप से नेस्ट किया जा सकता है। at-if में कोई दूसरा at-if, at-for आदि शामिल हो सकता है।

बाइंडिंग के साथ संयोजन

at-if ब्लॉक के अंदर आप पूरी टेम्पलेट भाषा का उपयोग कर सकते हैं: इंटरपोलेशन, प्रॉपर्टी बाइंडिंग और इवेंट बाइंडिंग सभी सामान्य रूप से काम करते हैं।

त्वरित जाँच: सशर्त कथन

नया सशर्त सिंटैक्स।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: सशर्त कथन

आपने सशर्त रेंडरिंग के लिए at-if ब्लॉक, विकल्पों के लिए at-else और at-else if तथा परिणाम कैप्चर करने के लिए as कीवर्ड सीखा। यह star-ngIf का स्थान लेता है और इसके लिए किसी इम्पोर्ट की आवश्यकता नहीं होती। अगला विषय: at-for से लूप चलाना।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “@if से सशर्त रेंडरिंग” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “@if से सशर्त रेंडरिंग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“@if से सशर्त रेंडरिंग” में मैं क्या सीखूँगा?

@if और @else से सामग्री सशर्त रूप से दिखाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“@if से सशर्त रेंडरिंग” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ