{"id":228243,"date":"2024-03-31T13:27:21","date_gmt":"2024-03-31T13:27:21","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/?p=228243"},"modified":"2024-03-31T13:27:21","modified_gmt":"2024-03-31T13:27:21","slug":"how-to-get-value-of-input-in-angular","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/","title":{"rendered":"How to get value of input in Angular?"},"content":{"rendered":"<p>Angular is a popular JavaScript framework that simplifies the process of building dynamic web applications. One common task when working with forms in Angular is to retrieve the value entered by the user in an input field. In this article, we will explore various approaches to get the value of an input in Angular.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_62 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#1_Using_Two-Way_Data_Binding\" title=\"1. Using Two-Way Data Binding\">1. Using Two-Way Data Binding<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#2_Using_Template_Reference_Variable\" title=\"2. Using Template Reference Variable\">2. Using Template Reference Variable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#3_Using_ViewChild\" title=\"3. Using ViewChild\">3. Using ViewChild<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#4_Accessing_Input_Value_in_Event_Handler\" title=\"4. Accessing Input Value in Event Handler\">4. Accessing Input Value in Event Handler<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#5_Using_ngModelChange\" title=\"5. Using ngModelChange\">5. Using ngModelChange<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#Related_or_Similar_FAQs\" title=\"Related or Similar FAQs:\">Related or Similar FAQs:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#1_How_can_I_reset_the_input_field_value_after_retrieving_it\" title=\"1. How can I reset the input field value after retrieving it?\">1. How can I reset the input field value after retrieving it?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#2_How_can_I_get_the_value_of_multiple_inputs_in_one_go\" title=\"2. How can I get the value of multiple inputs in one go?\">2. How can I get the value of multiple inputs in one go?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#3_Can_I_get_the_input_value_without_using_a_form_element\" title=\"3. Can I get the input value without using a form element?\">3. Can I get the input value without using a form element?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#4_How_can_I_retrieve_the_value_of_an_input_inside_a_reactive_form\" title=\"4. How can I retrieve the value of an input inside a reactive form?\">4. How can I retrieve the value of an input inside a reactive form?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#5_How_can_I_get_the_input_value_when_using_a_custom_form_control\" title=\"5. How can I get the input value when using a custom form control?\">5. How can I get the input value when using a custom form control?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#6_Can_I_retrieve_the_value_of_an_input_without_using_Angular_forms\" title=\"6. Can I retrieve the value of an input without using Angular forms?\">6. Can I retrieve the value of an input without using Angular forms?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#7_Are_there_any_other_event_bindings_that_can_be_used_to_capture_the_input_value\" title=\"7. Are there any other event bindings that can be used to capture the input value?\">7. Are there any other event bindings that can be used to capture the input value?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#8_How_can_I_get_the_value_of_an_input_after_a_certain_delay\" title=\"8. How can I get the value of an input after a certain delay?\">8. How can I get the value of an input after a certain delay?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#9_How_can_I_access_the_input_value_inside_a_directive\" title=\"9. How can I access the input value inside a directive?\">9. How can I access the input value inside a directive?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#10_Can_I_get_the_initial_value_of_the_input_declared_in_the_component\" title=\"10. Can I get the initial value of the input declared in the component?\">10. Can I get the initial value of the input declared in the component?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#11_How_can_I_get_the_value_of_an_input_with_type%E2%80%9Dcheckbox%E2%80%9D_or_type%E2%80%9Dradio%E2%80%9D\" title=\"11. How can I get the value of an input with type=&#8221;checkbox&#8221; or type=&#8221;radio&#8221;?\">11. How can I get the value of an input with type=&#8221;checkbox&#8221; or type=&#8221;radio&#8221;?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#12_How_can_I_retrieve_the_input_value_in_a_different_component\" title=\"12. How can I retrieve the input value in a different component?\">12. How can I retrieve the input value in a different component?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_Using_Two-Way_Data_Binding\"><\/span>1. Using Two-Way Data Binding<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><\/p>\n<p>Angular provides a powerful feature called two-way data binding that allows us to easily retrieve the value of an input field. By using [(ngModel)], we can bind the input field to a component property and retrieve its value directly in the component.<\/p>\n<p>&#8220;`typescript<br \/>\n<input [(ngModel)]=\"myInput\"><br \/>\n&#8220;`<br \/>\n&#8220;`typescript<br \/>\n\/\/ In the component<br \/>\nmyInput: string;<\/p>\n<p>getValue() {<br \/>\n  console.log(this.myInput);<br \/>\n}<br \/>\n&#8220;`<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Using_Template_Reference_Variable\"><\/span>2. Using Template Reference Variable<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><\/p>\n<p>If you don&#8217;t want to use two-way data binding, you can use a template reference variable to directly access the value of the input field.<\/p>\n<p>&#8220;`html<br \/>\n<input #myInputRef><br \/>\n<button (click)=\"getValue(myInputRef.value)\">Get Value<\/button><br \/>\n&#8220;`<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Using_ViewChild\"><\/span>3. Using ViewChild<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><\/p>\n<p>If you are working with input fields inside child components or nested structures, you can use ViewChild to access its value.<\/p>\n<p>&#8220;`typescript<br \/>\n@ViewChild(&#8216;myInput&#8217;) myInputRef: ElementRef;<\/p>\n<p>getValue() {<br \/>\n  console.log(this.myInputRef.nativeElement.value);<br \/>\n}<br \/>\n&#8220;`<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_Accessing_Input_Value_in_Event_Handler\"><\/span>4. Accessing Input Value in Event Handler<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><\/p>\n<p>If you want to retrieve the input value on a specific event like a button click, you can pass the value as an argument to the event handler function.<\/p>\n<p>&#8220;`html<br \/>\n<input #myInputRef><br \/>\n<button (click)=\"getValue(myInputRef.value)\">Get Value<\/button><br \/>\n&#8220;`<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_Using_ngModelChange\"><\/span>5. Using ngModelChange<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><\/p>\n<p>If you need to perform some actions immediately after the value of the input changes, you can utilize the ngModelChange event and execute a function to retrieve the value.<\/p>\n<p>&#8220;`html<br \/>\n<input [(ngModel)]=\"myInput\" (ngModelChange)=\"getValue()\"><br \/>\n&#8220;`<br \/>\n&#8220;`typescript<br \/>\n\/\/ In the component<br \/>\nmyInput: string;<\/p>\n<p>getValue() {<br \/>\n  console.log(this.myInput);<br \/>\n}<br \/>\n&#8220;`<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Related_or_Similar_FAQs\"><\/span>Related or Similar FAQs:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"1_How_can_I_reset_the_input_field_value_after_retrieving_it\"><\/span>1. How can I reset the input field value after retrieving it?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can reset the input field value by setting its ngModel bound property to an empty string or null.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_How_can_I_get_the_value_of_multiple_inputs_in_one_go\"><\/span>2. How can I get the value of multiple inputs in one go?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can bind each input to separate ngModel properties and then retrieve their values individually.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Can_I_get_the_input_value_without_using_a_form_element\"><\/span>3. Can I get the input value without using a form element?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>Yes, you can access the input value even without using a form element by employing the mentioned techniques.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_How_can_I_retrieve_the_value_of_an_input_inside_a_reactive_form\"><\/span>4. How can I retrieve the value of an input inside a reactive form?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can use the FormControl&#8217;s value property or utilize the valueChanges event to retrieve the value of the input inside a reactive form.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_How_can_I_get_the_input_value_when_using_a_custom_form_control\"><\/span>5. How can I get the input value when using a custom form control?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>If you are using a custom form control, you can implement the ControlValueAccessor interface and retrieve the value using the FormControl provided inside the writeValue method.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_Can_I_retrieve_the_value_of_an_input_without_using_Angular_forms\"><\/span>6. Can I retrieve the value of an input without using Angular forms?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>Yes, you can manually access the input element using JavaScript&#8217;s document object and retrieve its value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_Are_there_any_other_event_bindings_that_can_be_used_to_capture_the_input_value\"><\/span>7. Are there any other event bindings that can be used to capture the input value?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>Yes, you can use other event bindings such as keyup, keydown, change, etc., depending on your specific requirements.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_How_can_I_get_the_value_of_an_input_after_a_certain_delay\"><\/span>8. How can I get the value of an input after a certain delay?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can use the debounceTime operator from RxJS to delay the retrieval of the input value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"9_How_can_I_access_the_input_value_inside_a_directive\"><\/span>9. How can I access the input value inside a directive?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>In a directive, you can access the input value using the ElementRef or the @HostBinding decorator to bind the value to a property.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"10_Can_I_get_the_initial_value_of_the_input_declared_in_the_component\"><\/span>10. Can I get the initial value of the input declared in the component?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>Yes, you can access the initial value by binding it to a separate property in the component and retrieve it at any point.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"11_How_can_I_get_the_value_of_an_input_with_type%E2%80%9Dcheckbox%E2%80%9D_or_type%E2%80%9Dradio%E2%80%9D\"><\/span>11. How can I get the value of an input with type=&#8221;checkbox&#8221; or type=&#8221;radio&#8221;?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can bind the input field to a component property using [(ngModel)] or use event bindings like (click) or (change) to capture the checked value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"12_How_can_I_retrieve_the_input_value_in_a_different_component\"><\/span>12. How can I retrieve the input value in a different component?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><\/p>\n<p>You can share the value across components using services, parent-child component communication, or state management libraries like NgRx or Akita.<\/p>\n<p>In conclusion, there are multiple ways to get the value of an input field in Angular, ranging from two-way data binding to accessing the input element directly using various techniques like template reference variables or ViewChild. Understanding these different approaches allows you to efficiently retrieve and utilize user input in your Angular applications.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular is a popular JavaScript framework that simplifies the process of building dynamic web applications. One common task when working with forms in Angular is to retrieve the value entered by the user in an input field. In this article, we will explore various approaches to get the value of an input in Angular. 1. &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to get value of input in Angular?\" class=\"read-more button\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#more-228243\">Read more<span class=\"screen-reader-text\">How to get value of input in Angular?<\/span><\/a><\/p>\n","protected":false},"author":57,"featured_media":107420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86279],"tags":[],"class_list":["post-228243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn","no-featured-image-padding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to get value of input in Angular?<\/title>\n<meta name=\"description\" content=\"Angular is a popular JavaScript framework that simplifies the process of building dynamic web applications. One common task when working with forms in\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to get value of input in Angular?\" \/>\n<meta property=\"og:description\" content=\"Angular is a popular JavaScript framework that simplifies the process of building dynamic web applications. One common task when working with forms in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/synchronyfinancial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-31T13:27:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2024\/03\/faq.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Casey Mayer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@synchrony\" \/>\n<meta name=\"twitter:site\" content=\"@synchrony\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Casey Mayer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/\"},\"author\":{\"name\":\"Casey Mayer\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/89e431077ef417dfaa131f435124f18f\"},\"headline\":\"How to get value of input in Angular?\",\"datePublished\":\"2024-03-31T13:27:21+00:00\",\"dateModified\":\"2024-03-31T13:27:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/\"},\"wordCount\":716,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\"},\"articleSection\":[\"Learn\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/\",\"url\":\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/\",\"name\":\"How to get value of input in Angular?\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#website\"},\"datePublished\":\"2024-03-31T13:27:21+00:00\",\"dateModified\":\"2024-03-31T13:27:21+00:00\",\"description\":\"Angular is a popular JavaScript framework that simplifies the process of building dynamic web applications. One common task when working with forms in\",\"breadcrumb\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/namso-gen.co\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to get value of input in Angular?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#website\",\"url\":\"https:\/\/namso-gen.co\/blog\/\",\"name\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\",\"description\":\"In Namso gen blog you can get many tips regarding to Credit cards, VCC, Credit card security etc. You can generate credit cards by using Namso-gen.co\",\"publisher\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/namso-gen.co\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\",\"name\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\",\"url\":\"https:\/\/namso-gen.co\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png\",\"contentUrl\":\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png\",\"width\":500,\"height\":164,\"caption\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\"},\"image\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/synchronyfinancial\",\"https:\/\/twitter.com\/synchrony\",\"https:\/\/www.youtube.com\/synchronyfinancial\",\"https:\/\/www.instagram.com\/synchrony\",\"https:\/\/www.linkedin.com\/company\/synchrony-financial\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/89e431077ef417dfaa131f435124f18f\",\"name\":\"Casey Mayer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"Casey Mayer\"},\"description\":\"Guest author Casey Mayer has meticulously crafted and revised this article to the best of their knowledge and understanding. Readers are strongly advised to exercise caution, verify information independently, and rely on their own judgment when considering the information provided. Read more articles on Namso Gen here.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to get value of input in Angular?","description":"Angular is a popular JavaScript framework that simplifies the process of building dynamic web applications. One common task when working with forms in","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"How to get value of input in Angular?","og_description":"Angular is a popular JavaScript framework that simplifies the process of building dynamic web applications. One common task when working with forms in","og_url":"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/","og_site_name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","article_publisher":"https:\/\/www.facebook.com\/synchronyfinancial","article_published_time":"2024-03-31T13:27:21+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2024\/03\/faq.png","type":"image\/png"}],"author":"Casey Mayer","twitter_card":"summary_large_image","twitter_creator":"@synchrony","twitter_site":"@synchrony","twitter_misc":{"Written by":"Casey Mayer","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#article","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/"},"author":{"name":"Casey Mayer","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/89e431077ef417dfaa131f435124f18f"},"headline":"How to get value of input in Angular?","datePublished":"2024-03-31T13:27:21+00:00","dateModified":"2024-03-31T13:27:21+00:00","mainEntityOfPage":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/"},"wordCount":716,"commentCount":0,"publisher":{"@id":"https:\/\/namso-gen.co\/blog\/#organization"},"articleSection":["Learn"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/","url":"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/","name":"How to get value of input in Angular?","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/#website"},"datePublished":"2024-03-31T13:27:21+00:00","dateModified":"2024-03-31T13:27:21+00:00","description":"Angular is a popular JavaScript framework that simplifies the process of building dynamic web applications. One common task when working with forms in","breadcrumb":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-value-of-input-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/namso-gen.co\/blog\/"},{"@type":"ListItem","position":2,"name":"How to get value of input in Angular?"}]},{"@type":"WebSite","@id":"https:\/\/namso-gen.co\/blog\/#website","url":"https:\/\/namso-gen.co\/blog\/","name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","description":"In Namso gen blog you can get many tips regarding to Credit cards, VCC, Credit card security etc. You can generate credit cards by using Namso-gen.co","publisher":{"@id":"https:\/\/namso-gen.co\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/namso-gen.co\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/namso-gen.co\/blog\/#organization","name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","url":"https:\/\/namso-gen.co\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png","contentUrl":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png","width":500,"height":164,"caption":"Namso Gen Blog - Free Credit Card Generator [100% Valid]"},"image":{"@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/synchronyfinancial","https:\/\/twitter.com\/synchrony","https:\/\/www.youtube.com\/synchronyfinancial","https:\/\/www.instagram.com\/synchrony","https:\/\/www.linkedin.com\/company\/synchrony-financial"]},{"@type":"Person","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/89e431077ef417dfaa131f435124f18f","name":"Casey Mayer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Casey Mayer"},"description":"Guest author Casey Mayer has meticulously crafted and revised this article to the best of their knowledge and understanding. Readers are strongly advised to exercise caution, verify information independently, and rely on their own judgment when considering the information provided. Read more articles on Namso Gen here."}]}},"_links":{"self":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts\/228243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/comments?post=228243"}],"version-history":[{"count":0,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts\/228243\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/media\/107420"}],"wp:attachment":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/media?parent=228243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/categories?post=228243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/tags?post=228243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}