{"id":1369,"date":"2023-08-25T05:00:00","date_gmt":"2023-08-25T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1369"},"modified":"2023-08-24T18:07:46","modified_gmt":"2023-08-25T01:07:46","slug":"using-setters-with-input","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/using-setters-with-input\/","title":{"rendered":"Using setters with @Input()"},"content":{"rendered":"\n<p>Following our theme of lifecycle methods with <code><a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/ngonchanges-lifecycle-hook\/\" target=\"_blank\" rel=\"noopener\" title=\"\">ngOnChanges<\/a><\/code> and <code><a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/ngoninit-lifecycle-hook\/\" target=\"_blank\" rel=\"noopener\" title=\"\">ngOnInit<\/a><\/code>, I want to give you another interesting trick to be notified when an <code>@Input<\/code> value changes.<\/p>\n\n\n\n<p>We&#8217;re already familiar with that syntax:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"201\" height=\"65\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-32.png\" alt=\"\" class=\"wp-image-1370\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>But what if instead of applying <code>@Input<\/code> on a class property, we used it on a setter:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"645\" height=\"313\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-33.png\" alt=\"\" class=\"wp-image-1371\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-33.png 645w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-33-300x146.png 300w\" sizes=\"auto, (max-width: 645px) 100vw, 645px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The input works the same as before, with the advantage of running several instructions when a new value is set. All of that without using <code>ngOnChanges<\/code>. This approach is practical if you have several side-effects to trigger depending on which input changes, which would be tedious to handle with multiple conditionals:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"551\" height=\"249\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-34.png\" alt=\"\" class=\"wp-image-1372\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-34.png 551w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-34-300x136.png 300w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The setter approach brings more clarity and leaves less room for mistakes:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"524\" height=\"294\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-35.png\" alt=\"\" class=\"wp-image-1373\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-35.png 524w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-35-300x168.png 300w\" sizes=\"auto, (max-width: 524px) 100vw, 524px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Following our theme of lifecycle methods with ngOnChanges and ngOnInit, I want to give you another interesting trick to be notified when an @Input value changes. We&#8217;re already familiar with that syntax: But what if instead of applying @Input on a class property, we used it on a setter: The input works the same as [&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,11],"tags":[],"class_list":["post-1369","post","type-post","status-publish","format-standard","hentry","category-angular","category-components","category-directives"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1369","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=1369"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1369\/revisions"}],"predecessor-version":[{"id":1375,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1369\/revisions\/1375"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}