Angular Academy · पाठ

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

model सिग्नल से द्विदिश बाइंडिंग बनाएँ।

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

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

सिग्नल और दो-तरफ़ा बाइंडिंग

आधुनिक Angular model() उपलब्ध कराता है, जो मैन्युअल इनपुट/आउटपुट युग्म के बिना दो-तरफ़ा बाइंड किए जा सकने वाले इनपुट बनाने का सिग्नल-आधारित तरीका है।

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

ऐसा लिखने योग्य सिग्नल बनाने के लिए model() कॉल कीजिए, जिससे पैरेंट दो-तरफ़ा बाइंड कर सके।

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

@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
  checked = model(false);
}

पैरेंट से बाइंडिंग

पैरेंट मॉडल नाम के साथ केला-डिब्बा सिंटैक्स का उपयोग करता है, ठीक ngModel की तरह।

<app-toggle [(checked)]="isOn"></app-toggle>

// parent
isOn = signal(true);

model का मान पढ़ना

मॉडल एक सिग्नल है, इसलिए उसे फ़ंक्शन की तरह कॉल करके पढ़िए।

export class ToggleComponent {
  checked = model(false);
  describe() {
    return this.checked() ? "on" : "off";
  }
}

model में लिखना

मॉडल को set या update से अपडेट कीजिए। बदलाव अपने-आप पैरेंट तक पहुँच जाता है।

toggle() {
  this.checked.update(c => !c);
}

// or
turnOn() {
  this.checked.set(true);
}

आवश्यक model इनपुट

जब पैरेंट के लिए मान देना अनिवार्य हो, तब model.required() का उपयोग कीजिए।

import { model } from "@angular/core";

export class FieldComponent {
  value = model.required<string>();
}

टेम्पलेट में model का उपयोग

मॉडल सिग्नल को सीधे घटक के अपने टेम्पलेट में बाँधिए; उसे कॉल करने पर वर्तमान मान मिलता है।

@Component({
  selector: "app-toggle",
  template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
  checked = model(false);
  flip() { this.checked.update(v => !v); }
}

मैन्युअल आउटपुट की आवश्यकता नहीं

model() के साथ अलग @Output घोषित करने की आवश्यकता नहीं होती। Angular नाम के अंत में Change जोड़ने की परंपरा का उपयोग करके आपके लिए बदलाव वाला इवेंट तैयार करता है।

model बनाम input

साधारण input() घटक के अंदर केवल पढ़ने योग्य होता है, जबकि model() में लिखा जा सकता है और यह पैरेंट के साथ दो-तरफ़ा बाइंडिंग का समर्थन करता है।

// read-only:
label = input("");

// two-way writable:
value = model("");

model वाला काउंटर

यहाँ एक स्व-निहित काउंटर है, जिसका मान पैरेंट के साथ समन्वयित रहता है।

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

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

जब चाइल्ड घटक किसी ऐसे मान का स्वामी हो जिसे पैरेंट भी पढ़ना और अपडेट करना चाहता हो, जैसे कस्टम फ़ॉर्म नियंत्रण, टॉगल और स्लाइडर, तब model() का उपयोग कीजिए।

त्वरित जाँच

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

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

पुनरावलोकन

model() फ़ंक्शन ऐसा लिखने योग्य सिग्नल बनाता है जो मैन्युअल इनपुट/आउटपुट युग्म के बिना दो-तरफ़ा बाइंडिंग का समर्थन करता है। इसे कॉल करके पढ़िए, set या update से लिखिए, और पैरेंट से [(name)] के माध्यम से बाँधिए।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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