Angular Academy · पाठ

@switch से स्विचिंग

@switch और @case से टेम्पलेट चुनें।

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

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

switch से स्विच करना

at-switch ब्लॉक किसी मान के आधार पर कई शाखाओं में से एक चुनता है, ठीक switch statement की तरह। इसका उपयोग at-case और at-default के साथ किया जाता है।

switch का मूल सिंटैक्स

कोष्ठक में expression के साथ at-switch लिखें, फिर एक या अधिक at-case ब्लॉक लिखें, जिनमें प्रत्येक का मिलान करने वाला मान हो।

// @switch (status) {
//   @case ('loading') { <p>Loading...</p> }
//   @case ('error')   { <p>Error!</p> }
//   @default          { <p>Ready</p> }
// }

case ब्लॉक

हर at-case कोष्ठक में एक मान लेता है। जिस case का मान switch expression के बराबर होता है, वह सबसे पहले रेंडर होता है।

default ब्लॉक

जब कोई case मेल नहीं खाता, तब at-default ब्लॉक रेंडर होता है। यह वैकल्पिक है, लेकिन पूर्णता के लिए इसकी अनुशंसा की जाती है।

सख्त समानता

मिलान सख्त समानता (===) का उपयोग करता है। सुनिश्चित करें कि case मानों का प्रकार switch expression के प्रकार जैसा ही हो।

सिग्नल पर स्विच करना

switch expression signal कॉल हो सकती है, इसलिए signal बदलने पर दृश्य भी अपडेट हो जाता है।

// @switch (state()) {
//   @case ('on')  { <p>On</p> }
//   @case ('off') { <p>Off</p> }
// }

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

यह ngSwitch, star-ngSwitchCase और star-ngSwitchDefault डायरेक्टिव के पुराने संयोजन का स्थान लेता है और अधिक साफ़ सिंटैक्स प्रदान करता है, जिसमें किसी इम्पोर्ट की आवश्यकता नहीं होती।

केवल एक शाखा रेंडर होती है

at-switch ठीक एक मिलान करने वाली शाखा (या default) रेंडर करता है। अन्य शाखाएँ DOM में मौजूद ही नहीं होतीं।

Enums और Constants

case घटक पर उपलब्ध enum सदस्यों या constants से तुलना कर सकते हैं, जिससे पठनीयता और प्रकार-सुरक्षा बेहतर होती है।

switch के अंदर नेस्ट करना

हर case ब्लॉक में कोई भी टेम्पलेट सामग्री हो सकती है, जिसमें at-if और at-for जैसे अन्य नियंत्रण प्रवाह ब्लॉक भी शामिल हैं।

switch का उपयोग कब करें

जब एक ही मान के आधार पर कई अलग-अलग मामलों में शाखाएँ चुननी हों, तो लंबी at-if / at-else if श्रृंखला के बजाय at-switch को प्राथमिकता दें।

त्वरित जाँच: switch

switch ब्लॉक का वैकल्पिक मार्ग।

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

पुनरावलोकन: स्विच करना

आपने सख्त समानता से मिलान की जाने वाली at-case शाखाओं और वैकल्पिक at-default विकल्प वाले at-switch ब्लॉक को सीखा। यह ngSwitch का स्थान लेता है और ठीक एक शाखा रेंडर करता है। अगला विषय: at-defer से स्थगित लोडिंग।

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

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

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

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

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

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

क्या “@switch से स्विचिंग” पाठ निःशुल्क है?

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

“@switch से स्विचिंग” में मैं क्या सीखूँगा?

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

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

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

“@switch से स्विचिंग” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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