Angular Academy · पाठ

Host और Host-Context स्टाइलिंग

कंपोनेंट के होस्ट एलिमेंट की शैली निर्धारित करें।

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

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

होस्ट तत्व को शैली देना

किसी घटक को उसके अपने होस्ट तत्व (उसके चयनकर्ता टैग) के भीतर रेंडर किया जाता है। विशेष :host स्यूडो-क्लास आपको घटक CSS से उस तत्व को शैली देने देती है।

:host चयनकर्ता

घटक के अपने तत्व को लक्षित करने के लिए :host का उपयोग कीजिए, जैसे उसे प्रदर्शन और अंतराल देने के लिए।

/* card.component.css */
:host {
  display: block;
  padding: 16px;
}

:host की आवश्यकता क्यों है

:host के बिना आप घटक के भीतर से होस्ट तत्व को शैली नहीं दे सकते, क्योंकि सीमित चयनकर्ता केवल टेम्पलेट के अंदर मौजूद तत्वों से मेल खाते हैं।

शर्त के साथ :host

होस्ट को केवल उसके मेल खाने पर शैली देने के लिए :host() में चयनकर्ता दे सकते हैं, जैसे उसमें कोई क्लास हो।

:host(.active) {
  border: 2px solid green;
}

<!-- applies when host has class active -->
<app-card class="active"></app-card>

होस्ट क्लास की बाइंडिंग

घटक की अपनी स्थिति के आधार पर उसे शैली देने के लिए :host() को होस्ट क्लास बाइंडिंग के साथ मिलाइए।

@Component({
  selector: "app-card",
  host: { "[class.selected]": "isSelected" },
  styleUrl: "./card.component.css"
})
export class CardComponent {
  isSelected = true;
}

:host-context चयनकर्ता

:host-context() घटक को स्वयं होस्ट के बजाय किसी भी पूर्वज की शर्त के आधार पर शैली देता है। यह थीमिंग के लिए आदर्श है।

:host-context(.dark-theme) {
  background: #222;
  color: #eee;
}

थीमिंग का उदाहरण

यदि वृक्ष में ऊपर किसी अभिभावक के पास dark-theme क्लास है, तो नियम लागू होता है और एक पूर्वज, उसके अंदर मौजूद घटकों का रूप बदल सकता है।

<body class="dark-theme">
  <app-card></app-card>
  <!-- card uses dark styles -->
</body>

:host बनाम :host-context

:host घटक के अपने तत्व की जाँच करता है; :host-context पूर्वजों की जाँच करता है। अपनी स्थिति के लिए host और थीम जैसी विरासत में मिली संदर्भ-जानकारी के लिए host-context का उपयोग कीजिए।

वंशजों के साथ संयोजन

पूर्वज के संदर्भ के आधार पर अंदर के तत्वों को शैली देने के लिए :host-context को वंशज चयनकर्ताओं के साथ जोड़ सकते हैं।

:host-context(.compact) .title {
  font-size: 12px;
}

होस्ट का डिफ़ॉल्ट प्रदर्शन

कस्टम तत्वों के होस्ट डिफ़ॉल्ट रूप से इनलाइन होते हैं। लेआउट को अनुमानित रूप से काम कराने के लिए :host पर display: block सेट करना एक सामान्य पहला नियम है।

:host {
  display: block;
}

व्यावहारिक उपयोग

घटक के बाहरी बॉक्स को नियंत्रित करने, उसकी अपनी स्थिति पर प्रतिक्रिया देने और आसपास की थीम क्लास के अनुसार ढलने के लिए होस्ट स्टाइलिंग का उपयोग कीजिए। इससे शैलियाँ सीमित भी रहती हैं और लचीली भी।

त्वरित जाँच

होस्ट स्टाइलिंग की अपनी समझ जाँचिए।

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

पुनरावलोकन

घटक के अपने तत्व और उसकी स्थिति को शैली देने के लिए :host का उपयोग कीजिए, और थीमिंग के लिए पूर्वज क्लास पर प्रतिक्रिया देने हेतु :host-context() का। होस्ट पर display: block सेट करना उपयोगी डिफ़ॉल्ट है।

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

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

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

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

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

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

क्या “Host और Host-Context स्टाइलिंग” पाठ निःशुल्क है?

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

“Host और Host-Context स्टाइलिंग” में मैं क्या सीखूँगा?

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

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

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

“Host और Host-Context स्टाइलिंग” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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