{"id":1170,"date":"2023-07-11T05:00:00","date_gmt":"2023-07-11T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1170"},"modified":"2023-07-07T15:10:33","modified_gmt":"2023-07-07T22:10:33","slug":"using-setters-for-better-input","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/using-setters-for-better-input\/","title":{"rendered":"Using setters for better @Input"},"content":{"rendered":"\n<p>When using <code>@Input<\/code> in our components, we can implement <code>ngOnChanges<\/code> to be notified whenever an input value has changed:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"717\" height=\"456\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-1.png\" alt=\"\" class=\"wp-image-1172\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-1.png 717w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-1-300x191.png 300w\" sizes=\"auto, (max-width: 717px) 100vw, 717px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The above code works and would run whenever <code>id<\/code> or <code>name<\/code> are updated by the parent component. The problem is that this syntax can quickly become heavy when there are several <code>@Input<\/code>s in your component.<\/p>\n\n\n\n<p>Instead, we can do this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"608\" height=\"240\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-2.png\" alt=\"\" class=\"wp-image-1173\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-2.png 608w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-2-300x118.png 300w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Instead of using <code>@Input()<\/code> on a class property, we can use it on an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/set#using_setters_in_classes\" target=\"_blank\" rel=\"noopener\" title=\"\">ES6 setter function<\/a>. The benefit of the setter syntax is that it makes it obvious what kind of code we&#8217;re running when the <code>@Input<\/code> value is set. No more <code>ngOnChanges<\/code> needed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When using @Input in our components, we can implement ngOnChanges to be notified whenever an input value has changed: The above code works and would run whenever id or name are updated by the parent component. The problem is that this syntax can quickly become heavy when there are several @Inputs in your component. Instead, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,8],"tags":[],"class_list":["post-1170","post","type-post","status-publish","format-standard","hentry","category-angular","category-components"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1170"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1170\/revisions"}],"predecessor-version":[{"id":1175,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1170\/revisions\/1175"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}