Angular Academy · पाठ

टेम्पलेट में सिग्नल

कंपोनेंट टेम्पलेट में सिग्नल मान सीधे बाइंड करें।

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

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

टेम्पलेट में Signals

signals की सबसे अच्छी बातों में से एक यह है कि TypeScript की तरह ही आप उन्हें कॉल करके सीधे टेम्पलेट में पढ़ सकते हैं। async pipe की आवश्यकता नहीं होती।

Interpolation में पढ़ना

टेम्पलेट में, उसका मान दिखाने के लिए double-brace interpolation के अंदर signal को कॉल कीजिए।

@Component({
  selector: 'app-counter',
  template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
  count = signal(0);
}

Async Pipe की आवश्यकता नहीं

Observables के साथ subscribe और unsubscribe करने के लिए आपको async pipe की आवश्यकता होती थी। Signals synchronous होते हैं, इसलिए आप उन्हें सीधे कॉल करते हैं। Unsubscribe करने के लिए कुछ नहीं होता।

दृश्य का स्वचालित अपडेट

टेम्पलेट में पढ़े गए किसी signal के बदलने पर Angular समझ जाता है कि टेम्पलेट उस पर निर्भर है और केवल उसी binding को अपडेट करता है। यही fine-grained reactivity का व्यावहारिक रूप है।

Event Handlers में Signals को कॉल करना

Events को उन component methods से bind कीजिए जो signals को अपडेट करते हैं। टेम्पलेट प्रभावित bindings को अपने-आप फिर से render करता है।

@Component({
  selector: 'app-counter',
  template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
  count = signal(0);
  inc() { this.count.update(v => v + 1); }
}

Property Bindings में Signals

आप किसी भी binding के अंदर signal को कॉल कर सकते हैं, जिसमें property और attribute bindings भी शामिल हैं।

// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>

Built-in Control Flow के साथ Signals

आधुनिक टेम्पलेट built-in control flow blocks का उपयोग करते हैं। किसी if block के अंदर signal को कॉल करके पढ़ा जाता है।

// template:
// @if (count() > 0) {
//   <p>Positive</p>
// }

टेम्पलेट में Computed Signals

Derived values टेम्पलेट के लिए बहुत उपयोगी होते हैं। Computed signal केवल तभी दोबारा गणना करता है जब उसके स्रोत बदलते हैं, और इसे भी उसी तरह पढ़ा जाता है।

import { signal, computed } from '@angular/core';

export class CartComponent {
  qty = signal(2);
  price = signal(10);
  total = computed(() => this.qty() * this.price());
}

View में Computed को पढ़ना

Computed signal को टेम्पलेट में किसी भी signal की तरह पढ़िए।

// template: <p>Total: {{ total() }}</p>

यह कुशल क्यों है

क्योंकि Angular ठीक-ठीक ट्रैक करता है कि कौन-से template expressions कौन-से signals को पढ़ते हैं, इसलिए बदले हुए signal पर निर्भर न रहने वाले view के हिस्सों का काम छोड़ा जा सकता है।

सामान्य गलती: कोष्ठक भूल जाना

यदि आप टेम्पलेट में count() के बजाय count लिखते हैं, तो उसका मान नहीं, बल्कि signal function स्वयं दिखाई देगा। Signal को हमेशा कॉल कीजिए।

त्वरित जाँच: टेम्पलेट

टेम्पलेट में signals कैसे दिखाई देते हैं?

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

पुनरावलोकन: टेम्पलेट में Signals

आप टेम्पलेट में signals को कोष्ठकों के साथ कॉल करके पढ़ते हैं; इसके लिए async pipe की आवश्यकता नहीं होती और unsubscribe करने के लिए भी कुछ नहीं करना पड़ता। Angular केवल उन bindings को अपडेट करता है जो बदले हुए signal पर निर्भर हैं, और computed signals भी इसी तरह काम करते हैं। आपने Signals की मूलभूत बातें पूरी कर ली हैं।

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

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

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

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

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

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

क्या “टेम्पलेट में सिग्नल” पाठ निःशुल्क है?

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

“टेम्पलेट में सिग्नल” में मैं क्या सीखूँगा?

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

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

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

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

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

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

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

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

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