{"id":35,"date":"2019-05-05T09:51:14","date_gmt":"2019-05-05T09:51:14","guid":{"rendered":"http:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/"},"modified":"2019-05-05T09:51:14","modified_gmt":"2019-05-05T09:51:14","slug":"easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate","status":"publish","type":"post","link":"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/","title":{"rendered":"Easy angular trick to disable and enable button while input box empty or populate"},"content":{"rendered":"<p>In this another small article I will show you how you simply enable and disabled the input button while you type. To perform this simple trick we will hide the button, if the input box is empty similarly if the input box is filled with any keyword the button will not be disabled.<\/p>\n<p>To disabled it means the user will not be able to click the button. Now lets jump towards the button and let us see how the angular is going to perform the same.<\/p>\n<p>In your app.component.html or any component you would like to try add the below code.<\/p>\n<pre><code>&lt;input type=\"text\" class=\"form-control\" [(ngModel)]=\"dynamic_content\"&gt;\n&lt;button class=\"btn btn-primary\" [disabled]=\"dynamic_content=== ''\"&gt;Save&lt;\/button&gt;<\/code><\/pre>\n<p>You may see the above code there are only two lines. Usually, there are 4 different types of data binding but in the code, we are using two types of data binding.<\/p>\n<ul>\n<li>Two-way data binding and<\/li>\n<li>One way data binding (here we are using \u201d Property data binding\u201d)<\/li>\n<\/ul>\n<p>Also note, in order to use <strong>ngModel<\/strong> inside the input element we need to import <strong>FormsModule <\/strong>from angular in <code>app.module.ts<\/code> file<\/p>\n<pre><code>import \"FormsModule\" from \"@angular\/forms\";\n\n@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    FormsModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})<\/code><\/pre>\n<p>So whenever user type something in the input box, the data gets updated to the button\u2019s property binding called [disabled]=\u201d<strong>dynamic_content<\/strong> == \u201d \u201c. So the disabled attribute checks if the dynamic_content variable is empty or filled with text. So it disabled the button if the variable is empty.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this another small article I will show you how you simply enable and disabled the input button while you type. To perform this simple trick we will hide the button, if the input box is empty similarly if the input box is filled with any keyword the button will not be disabled. To disabled [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-35","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Easy angular trick to disable and enable button while input box empty or populate - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Easy angular trick to disable and enable button while input box empty or populate - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"In this another small article I will show you how you simply enable and disabled the input button while you type. To perform this simple trick we will hide the button, if the input box is empty similarly if the input box is filled with any keyword the button will not be disabled. To disabled [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-05T09:51:14+00:00\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/\",\"name\":\"Easy angular trick to disable and enable button while input box empty or populate - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"datePublished\":\"2019-05-05T09:51:14+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Easy angular trick to disable and enable button while input box empty or populate\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Easy angular trick to disable and enable button while input box empty or populate - Santosh Kumar Shah","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:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/","og_locale":"en_US","og_type":"article","og_title":"Easy angular trick to disable and enable button while input box empty or populate - Santosh Kumar Shah","og_description":"In this another small article I will show you how you simply enable and disabled the input button while you type. To perform this simple trick we will hide the button, if the input box is empty similarly if the input box is filled with any keyword the button will not be disabled. To disabled [&hellip;]","og_url":"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2019-05-05T09:51:14+00:00","author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/","url":"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/","name":"Easy angular trick to disable and enable button while input box empty or populate - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"datePublished":"2019-05-05T09:51:14+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/easy-angular-trick-to-disable-and-enable-button-while-input-box-empty-or-populate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Easy angular trick to disable and enable button while input box empty or populate"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}