{"id":258293,"date":"2024-06-11T18:44:54","date_gmt":"2024-06-11T18:44:54","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/?p=258293"},"modified":"2024-06-11T18:44:54","modified_gmt":"2024-06-11T18:44:54","slug":"how-to-get-selected-option-value-in-angular","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/","title":{"rendered":"How to get selected option value in Angular?"},"content":{"rendered":"<p>How to get selected option value in Angular?<\/p>\n<p>When working with forms in Angular, you may often encounter a scenario where you need to get the selected option value from a dropdown or select element. In this article, we will explore various approaches to achieve this in Angular. Let&#8217;s dive in!<\/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-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#Method_1_Using_Template_Reference_Variable\" title=\"Method 1: Using Template Reference Variable\">Method 1: Using Template Reference Variable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#Method_2_Using_Two-Way_Data_Binding\" title=\"Method 2: Using Two-Way Data Binding\">Method 2: Using Two-Way Data Binding<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#Method_3_Using_Reactive_Forms\" title=\"Method 3: Using Reactive Forms\">Method 3: Using Reactive Forms<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#Method_4_Using_ngModelChange_Event\" title=\"Method 4: Using ngModelChange Event\">Method 4: Using ngModelChange Event<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#FAQs\" title=\"FAQs:\">FAQs:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#Can_I_use_a_variable_directly_in_ngModel_to_get_the_selected_option_value\" title=\"Can I use a variable directly in ngModel to get the selected option value?\">Can I use a variable directly in ngModel to get the selected option value?<\/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-selected-option-value-in-angular\/#How_can_I_reset_the_selected_option_in_ngModel\" title=\"How can I reset the selected option in ngModel?\">How can I reset the selected option in ngModel?<\/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-selected-option-value-in-angular\/#Can_I_use_ngModel_and_reactive_forms_together\" title=\"Can I use ngModel and reactive forms together?\">Can I use ngModel and reactive forms together?<\/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-selected-option-value-in-angular\/#Can_I_get_the_selected_option_value_without_using_ngModel_or_reactive_forms\" title=\"Can I get the selected option value without using ngModel or reactive forms?\">Can I get the selected option value without using ngModel or reactive forms?<\/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-selected-option-value-in-angular\/#Can_I_get_the_selected_options_text_instead_of_its_value\" title=\"Can I get the selected option&#8217;s text instead of its value?\">Can I get the selected option&#8217;s text instead of its value?<\/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-selected-option-value-in-angular\/#How_can_I_get_the_selected_option_value_on_clicking_a_button\" title=\"How can I get the selected option value on clicking a button?\">How can I get the selected option value on clicking a button?<\/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-selected-option-value-in-angular\/#Is_it_possible_to_get_the_selected_option_value_without_any_event_trigger\" title=\"Is it possible to get the selected option value without any event trigger?\">Is it possible to get the selected option value without any event trigger?<\/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-selected-option-value-in-angular\/#Can_I_access_the_selected_option_value_in_ngOnInit_lifecycle_hook\" title=\"Can I access the selected option value in ngOnInit() lifecycle hook?\">Can I access the selected option value in ngOnInit() lifecycle hook?<\/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-selected-option-value-in-angular\/#What_if_my_select_element_is_dynamically_generated\" title=\"What if my select element is dynamically generated?\">What if my select element is dynamically generated?<\/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-selected-option-value-in-angular\/#How_can_I_get_the_selected_option_value_in_a_multiselect_dropdown\" title=\"How can I get the selected option value in a multiselect dropdown?\">How can I get the selected option value in a multiselect dropdown?<\/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-selected-option-value-in-angular\/#Can_I_get_the_selected_option_value_in_a_form_submit_event\" title=\"Can I get the selected option value in a form submit event?\">Can I get the selected option value in a form submit event?<\/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-selected-option-value-in-angular\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Method_1_Using_Template_Reference_Variable\"><\/span>Method 1: Using Template Reference Variable<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nOne way to get the selected option value is by using a template reference variable in your HTML template. You can attach this variable to the select element and access it in your component.<br \/>\n<code><br \/>\n<select #mySelect><br \/><option value=\"option1\">Option 1<\/option><br \/><option value=\"option2\">Option 2<\/option><br \/><option value=\"option3\">Option 3<\/option><br \/>\n<\/select><br \/>\n<\/code><br \/>\n<strong>To get the selected option value, simply refer to the template reference variable in your component:<\/strong><br \/>\n<code><br \/>\n@ViewChild('mySelect') mySelect: ElementRef;<br \/>\n...<br \/>\nconst selectedValue = this.mySelect.nativeElement.value;<br \/>\n<\/code><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Method_2_Using_Two-Way_Data_Binding\"><\/span>Method 2: Using Two-Way Data Binding<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nAngular also provides the two-way data binding feature, which can be utilized to get the selected option value without explicitly accessing the DOM element.<br \/>\n<code><br \/>\n<select [(ngModel)]=\"selectedValue\"><br \/><option value=\"option1\">Option 1<\/option><br \/><option value=\"option2\">Option 2<\/option><br \/><option value=\"option3\">Option 3<\/option><br \/>\n<\/select><br \/>\n<\/code><br \/>\n<strong>To access the selected option value, refer to the bound variable in your component:<\/strong><br \/>\n<code><br \/>\nselectedValue: string;<br \/>\n...<br \/>\nconsole.log(this.selectedValue);<br \/>\n<\/code><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Method_3_Using_Reactive_Forms\"><\/span>Method 3: Using Reactive Forms<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nIf you are using reactive forms in Angular, you can easily retrieve the selected option value using the form controls.<br \/>\n<code><br \/>\n<select formControlName=\"myControl\"><br \/><option value=\"option1\">Option 1<\/option><br \/><option value=\"option2\">Option 2<\/option><br \/><option value=\"option3\">Option 3<\/option><br \/>\n<\/select><br \/>\n<\/code><br \/>\n<strong>To get the selected option value using reactive forms, access the control&#8217;s value:<\/strong><br \/>\n<code><br \/>\nconst selectedValue = this.myForm.get('myControl').value;<br \/>\n<\/code><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Method_4_Using_ngModelChange_Event\"><\/span>Method 4: Using ngModelChange Event<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nIn certain cases, you might want to perform some actions whenever the option selection changes. You can achieve this by using the ngModelChange event.<br \/>\n<code><br \/>\n<select [(ngModel)]=\"selectedValue\" (ngModelChange)=\"onSelectChange()\"><br \/><option value=\"option1\">Option 1<\/option><br \/><option value=\"option2\">Option 2<\/option><br \/><option value=\"option3\">Option 3<\/option><br \/>\n<\/select><br \/>\n<\/code><br \/>\n<strong>To handle the event and get the selected option value:<\/strong><br \/>\n<code><br \/>\nonSelectChange() {<br \/>\n  console.log(this.selectedValue);<br \/>\n}<br \/>\n<\/code><\/p>\n<h3><span class=\"ez-toc-section\" id=\"FAQs\"><\/span>FAQs:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_use_a_variable_directly_in_ngModel_to_get_the_selected_option_value\"><\/span>Can I use a variable directly in ngModel to get the selected option value?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can bind a variable directly using [(ngModel)] directive, and it will hold the selected option value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_can_I_reset_the_selected_option_in_ngModel\"><\/span>How can I reset the selected option in ngModel?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nTo reset the selected option, you need to set the corresponding variable value to null or an appropriate initial value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_use_ngModel_and_reactive_forms_together\"><\/span>Can I use ngModel and reactive forms together?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can use ngModel and reactive forms together, but it is generally recommended to choose one approach based on your specific requirements.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_get_the_selected_option_value_without_using_ngModel_or_reactive_forms\"><\/span>Can I get the selected option value without using ngModel or reactive forms?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can achieve this by using JavaScript or TypeScript to directly access the DOM element and fetch the value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_get_the_selected_options_text_instead_of_its_value\"><\/span>Can I get the selected option&#8217;s text instead of its value?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, by using native DOM properties like `innerText` or `textContent`, you can retrieve the selected option&#8217;s text.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_can_I_get_the_selected_option_value_on_clicking_a_button\"><\/span>How can I get the selected option value on clicking a button?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can bind a click event to a button and access the selected option value from the corresponding variable.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Is_it_possible_to_get_the_selected_option_value_without_any_event_trigger\"><\/span>Is it possible to get the selected option value without any event trigger?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nNo, in order to obtain the selected option value, you need some form of event trigger, such as model binding or a button click.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_access_the_selected_option_value_in_ngOnInit_lifecycle_hook\"><\/span>Can I access the selected option value in ngOnInit() lifecycle hook?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nNo, it is not possible to access the selected option value in ngOnInit() as the DOM may not have been fully initialized at that point.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_if_my_select_element_is_dynamically_generated\"><\/span>What if my select element is dynamically generated?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nIn the case of dynamically generated select elements, you can bind the options to an array in your component and manipulate the selected value accordingly.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_can_I_get_the_selected_option_value_in_a_multiselect_dropdown\"><\/span>How can I get the selected option value in a multiselect dropdown?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nFor multiselect dropdowns, you need to bind the selected options to an array using [(ngModel)] or reactive forms, and then you can access the array of selected values.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_get_the_selected_option_value_in_a_form_submit_event\"><\/span>Can I get the selected option value in a form submit event?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can access the selected option value in the form submit event handler using the corresponding variable bound to ngModel or form control.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nIn this article, we have explored several methods to get the selected option value in Angular. Whether you are using template reference variables, two-way data binding, reactive forms, or events, Angular provides various approaches to accomplish this task. By utilizing these techniques, you can easily retrieve the selected option value and incorporate it into your application&#8217;s logic.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to get selected option value in Angular? When working with forms in Angular, you may often encounter a scenario where you need to get the selected option value from a dropdown or select element. In this article, we will explore various approaches to achieve this in Angular. Let&#8217;s dive in! Method 1: Using Template &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to get selected option value in Angular?\" class=\"read-more button\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#more-258293\">Read more<span class=\"screen-reader-text\">How to get selected option value in Angular?<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":107420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86279],"tags":[],"class_list":["post-258293","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 selected option value in Angular?<\/title>\n<meta name=\"description\" content=\"How to get selected option value in Angular? When working with forms in Angular, you may often encounter a scenario where you need to get the selected\" \/>\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-selected-option-value-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 selected option value in Angular?\" \/>\n<meta property=\"og:description\" content=\"How to get selected option value in Angular? When working with forms in Angular, you may often encounter a scenario where you need to get the selected\" \/>\n<meta property=\"og:url\" content=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-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-06-11T18:44:54+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=\"Timothy Mathis\" \/>\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=\"Timothy Mathis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 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-selected-option-value-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/\"},\"author\":{\"name\":\"Timothy Mathis\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318\"},\"headline\":\"How to get selected option value in Angular?\",\"datePublished\":\"2024-06-11T18:44:54+00:00\",\"dateModified\":\"2024-06-11T18:44:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/\"},\"wordCount\":657,\"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-selected-option-value-in-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/\",\"url\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/\",\"name\":\"How to get selected option value in Angular?\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#website\"},\"datePublished\":\"2024-06-11T18:44:54+00:00\",\"dateModified\":\"2024-06-11T18:44:54+00:00\",\"description\":\"How to get selected option value in Angular? When working with forms in Angular, you may often encounter a scenario where you need to get the selected\",\"breadcrumb\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/namso-gen.co\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to get selected option value 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\/ffa5be155490b2344e28f672fcc1e318\",\"name\":\"Timothy Mathis\",\"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\":\"Timothy Mathis\"},\"description\":\"Guest author Timothy Mathis 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 selected option value in Angular?","description":"How to get selected option value in Angular? When working with forms in Angular, you may often encounter a scenario where you need to get the selected","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-selected-option-value-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"How to get selected option value in Angular?","og_description":"How to get selected option value in Angular? When working with forms in Angular, you may often encounter a scenario where you need to get the selected","og_url":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-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-06-11T18:44:54+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":"Timothy Mathis","twitter_card":"summary_large_image","twitter_creator":"@synchrony","twitter_site":"@synchrony","twitter_misc":{"Written by":"Timothy Mathis","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#article","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/"},"author":{"name":"Timothy Mathis","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318"},"headline":"How to get selected option value in Angular?","datePublished":"2024-06-11T18:44:54+00:00","dateModified":"2024-06-11T18:44:54+00:00","mainEntityOfPage":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/"},"wordCount":657,"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-selected-option-value-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/","url":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/","name":"How to get selected option value in Angular?","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/#website"},"datePublished":"2024-06-11T18:44:54+00:00","dateModified":"2024-06-11T18:44:54+00:00","description":"How to get selected option value in Angular? When working with forms in Angular, you may often encounter a scenario where you need to get the selected","breadcrumb":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-option-value-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/namso-gen.co\/blog\/"},{"@type":"ListItem","position":2,"name":"How to get selected option value 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\/ffa5be155490b2344e28f672fcc1e318","name":"Timothy Mathis","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":"Timothy Mathis"},"description":"Guest author Timothy Mathis 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\/258293","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\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/comments?post=258293"}],"version-history":[{"count":0,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts\/258293\/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=258293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/categories?post=258293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/tags?post=258293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}