Angular Academy · पाठ

input() से सिग्नल इनपुट

प्रतिक्रियाशील इनपुट को सिग्नल के रूप में घोषित करें।

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

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

Signal-आधारित इनपुट

आधुनिक Angular, घटक इनपुट को Signals के रूप में घोषित करने के लिए input() फ़ंक्शन प्रदान करता है। यह पुराने @Input डेकोरेटर का प्रतिक्रियाशील विकल्प है।

Signal इनपुट घोषित करना

वैकल्पिक डिफ़ॉल्ट मान के साथ input() को कॉल कीजिए। इसका परिणाम केवल-पठन Signal होता है।

import { Component, input } from "@angular/core";

@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
  name = input("World");
}

इनपुट पढ़ना

Signal इनपुट को कोड और टेम्पलेट, दोनों में फ़ंक्शन की तरह कॉल करके पढ़ा जाता है।

@Component({
  selector: "app-greet",
  template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
  name = input("World");
}

अभिभावक से बाइंडिंग

अभिभावक, प्रॉपर्टी बाइंडिंग का उपयोग करके Signal इनपुट से ठीक उसी तरह जुड़ता है जैसे पुराने इनपुट से।

<app-greet [name]="userName"></app-greet>

// parent
userName = "Ada";

इनपुट केवल-पठन होते हैं

साधारण input() घटक के अंदर केवल-पठन होता है। आप उस पर set कॉल नहीं कर सकते; केवल अभिभावक ही उसका मान बदल सकता है।

// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signals

इनपुट का प्रकार निर्धारित करना

प्रकार-सुरक्षा के लिए सामान्य प्रकार उपलब्ध कराइए, विशेषकर तब जब अनुमान लगाने के लिए कोई डिफ़ॉल्ट मान न हो।

age = input<number>();
label = input<string>("Untitled");

गणित किए गए मानों में इनपुट

इनपुट Signals होने के कारण, वे अपने-आप अपडेट होने वाली व्युत्पन्न स्थिति के लिए computed के साथ आसानी से एकीकृत हो जाते हैं।

import { input, computed } from "@angular/core";

first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());

effect के साथ इनपुट

इनपुट में बदलाव पर effect के माध्यम से प्रतिक्रिया दे सकते हैं। पढ़ा गया Signal बदलने पर यह फिर से चलता है।

constructor() {
  effect(() => {
    console.log("name is", this.name());
  });
}

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

Signal इनपुट के साथ अक्सर अब ngOnChanges की आवश्यकता नहीं रहती; computed और effect आपके लिए बदलावों पर प्रतिक्रिया करते हैं।

इनपुट का उपनाम बनाना

alias विकल्प से अलग सार्वजनिक बाइंडिंग नाम दिखा सकते हैं।

value = input(0, { alias: "count" });

<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>

Signal इनपुट क्यों

Signal इनपुट प्रतिक्रियाशील और प्रकार-सुरक्षित होते हैं तथा computed और effect के साथ साफ़-सुथरे ढंग से संयोजित होते हैं। इससे डेकोरेटर और जीवनचक्र-आधारित तरीके की तुलना में अनावश्यक कोड कम होता है।

त्वरित जाँच

Signal इनपुट की अपनी समझ जाँचिए।

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

पुनरावलोकन

input() फ़ंक्शन प्रतिक्रियाशील, केवल-पठन Signal इनपुट घोषित करता है। उन्हें कॉल करके पढ़िए, सामान्य प्रकारों से उनका प्रकार निर्धारित कीजिए, आवश्यकता होने पर उपनाम दीजिए और ngOnChanges के बजाय उन्हें computed और effect के साथ मिलाइए।

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

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

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

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

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

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

क्या “input() से सिग्नल इनपुट” पाठ निःशुल्क है?

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

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

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

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

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

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

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

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

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

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

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