{"flag":true,"single":true,"pageTitle":"[ngModel] vs [(ngModel)] in angular 15+","post":{"id":82,"user_id":"1","slug":"-ngmodel-vs-ngmodel-in-angular-15--nd0x","title":"[ngModel] vs [(ngModel)] in angular 15+","body":"<p><strong>[ngModel]=\"fieldname\": <\/strong>One-way data binding (property binding)<br><strong>[(ngModel)]=\"fieldname\":<\/strong> Two-way data binding (property binding and event binding)<\/p>\r\n<p>&nbsp;<\/p>\r\n<p><strong>[ngModel]=\"fieldname\":<\/strong> This syntax is for <strong>one-way data binding<\/strong>. It binds the <strong>fieldname<\/strong> property from the component to the input element in the template. This means that<strong> changes in the input element will update the fieldname <\/strong><strong>property<\/strong>, but not the other way around. It is also called property binding.<\/p>\r\n<p><strong>[(ngModel)]=\"fieldname\":<\/strong> This syntax is for two-way data binding. It binds the <strong>fieldname<\/strong> property from the component to the input element in the template and vice versa. This means that<strong> changes in the input element will update the fieldnameproperty, and any changes in the property will also update the input element.<\/strong> The [(ngModel)] syntax is a combination of property binding (using square brackets) and event binding (using parentheses), which is why it is also known as \"banana in a box\" syntax.<\/p>\r\n<p>In view<\/p>\r\n<pre class=\"language-markup\"><code>&lt;input type=\"email\" name=\"email\" [(ngModel)]=\"fieldname\"&gt;<\/code><\/pre>\r\n<p>in component<\/p>\r\n<pre class=\"language-markup\"><code>  fieldname:string='all';<\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-29T05:51:42.000000Z","updated_at":"2023-03-29T05:51:42.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"[ngModel]=\"fieldname\": One-way data binding (property binding)[(ngModel)]=\"fieldname\": Two-way data binding (property binding and event bind - [ngModel] vs [(ngModel)] in angular 15+ (Updated: March 29, 2023) - Read more about [ngModel] vs [(ngModel)] in angular 15+ at my programming site [SITE]","categories":[]}