In the traditional Angular approach, creating two-way binding meant setting up both an @Input() to receive data and an @Output() to emit changes. You also needed to wire up event emitters manually. This pattern worked, but it added boilerplate and split the logic for incoming and outgoing data.<\/p>\n\n\n\n
Introduced in Angular v17, the model() signal replaces the old binding setup with a single, writable signal. This signal acts both as an input and an output. When the parent updates the bound property, the signal gets updated. When the child sets a new value, that change automatically reflects back in the parent.<\/p>\n\n\n\n
Old Way Using <\/strong>@Input()<\/strong> and <\/strong>@Output()<\/strong><\/p>\n\n\n\n Usage:<\/strong><\/p>\n\n\n\n New Way Using model()<\/strong><\/p>\n\n\n\n Usage:<\/strong><\/p>\n\n\n\n The model() signal simplifies two-way binding into a single, readable, and reactive property. It cuts boilerplate, unifies component state, and improves maintainability. If you’re serious about building modern Angular apps with cleaner architecture and fewer moving parts, it\u2019s time to embrace signals. And if you want expert help modernizing your codebase, hire Angular developers<\/a> who already work with signals and understand how to architect with model() at the core. It\u2019ll save you time, money, and future headaches.<\/p>\n","protected":false},"excerpt":{"rendered":" In the traditional Angular approach, creating two-way binding meant setting up both an @Input() to receive data and an @Output() to emit changes. You also needed to wire up event emitters manually. This pattern worked, but it added boilerplate and split the logic for incoming and outgoing data. What model() Signal Does Differently Introduced in […]<\/p>\n","protected":false},"author":2,"featured_media":2444,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,3],"tags":[],"class_list":["post-2443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=2443"}],"version-history":[{"count":2,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2443\/revisions"}],"predecessor-version":[{"id":2447,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2443\/revisions\/2447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/2444"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=2443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=2443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=2443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}@Component({\n selector: 'app-custom-input-old',\n template: `<input [value]=\"value\" (input)=\"onValueChange($event)\">`\n})\nexport class CustomInputOldComponent {\n @Input() value: string = '';\n @Output() valueChange = new EventEmitter<string>();\n\n onValueChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.valueChange.emit(target.value);\n }\n}<\/code><\/pre>\n\n\n\n<app-custom-input-old [(value)]=\"parentProperty\"><\/app-custom-input-old><\/code><\/pre>\n\n\n\n@Component({\n selector: 'app-custom-input-new',\n standalone: true,\n template: `<input [value]=\"value()\" (input)=\"onValueChange($event)\">`\n})\nexport class CustomInputNewComponent {\n value = model.required<string>();\n\n onValueChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.value.set(target.value);\n }\n}<\/code><\/pre>\n\n\n\n<app-custom-input-new [(value)]=\"parentProperty\"><\/app-custom-input-new><\/code><\/pre>\n\n\n\nWhy model() Improves Component Design<\/h2>\n\n\n\n
\n
<\/strong>You define the binding in one place. No need for extra decorators or emitters.<\/li>\n\n\n\n
<\/strong>The writable signal makes it clear where state comes from and where it goes.<\/li>\n\n\n\n
<\/strong>Since it\u2019s a signal, you can hook into changes with computed() or effect() without extra wiring.<\/li>\n<\/ul>\n\n\n\nConclusion<\/h2>\n\n\n\n