कोणीय 2 - उपयोगकर्ता इनपुट

Angular 2 में, आप रन समय में तत्वों के मूल्यों को बदलने के लिए HTML के DOM तत्व संरचना का उपयोग कर सकते हैं। आइए कुछ विस्तार से देखें।

इनपुट टैग

App.component.ts फ़ाइल में निम्न कोड रखें।

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: ' 
      <div> 
         <input [value] = "name" (input) = "name = $event.target.value"> 
         {{name}} 
      </div> 
   ' 
}) 
export class AppComponent { }

उपरोक्त कोड के बारे में निम्नलिखित बातों पर ध्यान देने की आवश्यकता है।

[value] = ”username” - इसका उपयोग इनपुट तत्व के मूल्य संपत्ति में अभिव्यक्ति उपयोगकर्ता नाम को बांधने के लिए किया जाता है।
(input) = ”expression” - यह इनपुट तत्व के इनपुट इवेंट के लिए एक अभिव्यक्ति को बांधने का एक घोषणात्मक तरीका है।
username = $event.target.value - इनपुट ईवेंट को निकाल दिए जाने पर जो अभिव्यक्ति निष्पादित होती है।
$event - क्या एंगुलर द्वारा इवेंट बाइंडिंग में एक एक्सप्रेशन सामने आया है, जिसमें इवेंट के पेलोड का मूल्य है।

एक बार जब आप सभी कोड परिवर्तन सहेज लेते हैं और ब्राउज़र को ताज़ा करते हैं, तो आपको निम्न आउटपुट मिलेगा।

अब आप कुछ भी लिख सकते हैं और इनपुट नियंत्रण के बगल में एक ही इनपुट पाठ में दिखाई देगा।

इनपुट पर क्लिक करें

App.component.ts फ़ाइल में निम्न कोड रखें।

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

जब आप मुझे क्लिक करें बटन दबाते हैं, तो आपको निम्न आउटपुट मिलेगा।