{"id":986,"date":"2023-05-23T05:00:00","date_gmt":"2023-05-23T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=986"},"modified":"2023-05-17T15:08:05","modified_gmt":"2023-05-17T22:08:05","slug":"anti-pattern-series-using-too-many-services","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/anti-pattern-series-using-too-many-services\/","title":{"rendered":"Anti-pattern series: Using too many services"},"content":{"rendered":"\n<p>While <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/dependency-injection\/\" target=\"_blank\" rel=\"noopener\" title=\"\">services and dependency injection<\/a> are good, just like many good things in life, they can be over-used and become somewhat of an anti-pattern.<\/p>\n\n\n\n<p><strong>Why?<\/strong> Because of <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/change-detection-for-angular-components\/\" target=\"_blank\" rel=\"noopener\" title=\"\">how change detection works in Angular<\/a>. Angular has two modes for change detection: The <code>default<\/code> mode and the <code>onPush<\/code> mode. <code>onPush<\/code> is an optimization that works if and only if you&#8217;re using input-driven components, also known as <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/change-detection-for-angular-components\/\" target=\"_blank\" rel=\"noopener\" title=\"\">presentation components<\/a>.<\/p>\n\n\n\n<p>In other words, whenever you inject a service into a component, you prevent that component from using the optimized <code>onPush<\/code> change detection mode. This is one of the reasons best practices recommend sticking with container components (service-driven components tied to specific use cases) and presentation components (input-driven ones that can be used and reused as they&#8217;re not connected to any service &#8211; and any business logic).<\/p>\n\n\n\n<p>The more presentation components you create, the more reusable your code is, and the more change detection can be improved. The next time you inject a service in a new component, think again:<strong><em> Could I pass that data as <code>@Input<\/code>(s) instead of injecting a service?<\/em><\/strong> <\/p>\n\n\n\n<p>If so, congratulations: You just prevented your presentation component from falling into this anti-pattern.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While services and dependency injection are good, just like many good things in life, they can be over-used and become somewhat of an anti-pattern. Why? Because of how change detection works in Angular. Angular has two modes for change detection: The default mode and the onPush mode. onPush is an optimization that works if and [&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,28],"tags":[],"class_list":["post-986","post","type-post","status-publish","format-standard","hentry","category-angular","category-anti-patterns"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/986","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=986"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/986\/revisions"}],"predecessor-version":[{"id":988,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/986\/revisions\/988"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}