{"id":665,"date":"2023-03-16T05:00:00","date_gmt":"2023-03-16T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=665"},"modified":"2023-03-15T18:01:50","modified_gmt":"2023-03-16T01:01:50","slug":"the-inject-function","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/the-inject-function\/","title":{"rendered":"The inject() function"},"content":{"rendered":"\n

Next in our dependency injection series<\/a> is the inject()<\/a><\/code> function. You’re probably familiar with injecting services using class constructors as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

We can also use the inject<\/code> function to do the same:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The inject<\/code> function can be used in 3 different places. We can use it when initializing the field of an “Angular” class (component\/service\/pipe\/directive\/module) or in the body of the constructor of such a class:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Or it can be used in a provider factory function<\/a> (see yesterday’s post<\/a> as an example):<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

For now, we can consider that function as a syntax alternative. That said, we must start using it as soon as possible because router class guards have been deprecated in Angular 15.2<\/a>. And the alternative is functional guards that might need dependencies injected – using the inject<\/code> function:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"

Next in our dependency injection series is the inject() function. You’re probably familiar with injecting services using class constructors as follows: We can also use the inject function to do the same: The inject function can be used in 3 different places. We can use it when initializing the field of an “Angular” class (component\/service\/pipe\/directive\/module) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,26],"tags":[],"class_list":["post-665","post","type-post","status-publish","format-standard","hentry","category-angular","category-dependency-injection"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/665","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=665"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/665\/revisions"}],"predecessor-version":[{"id":672,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/665\/revisions\/672"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}