{"id":1714,"date":"2023-11-03T05:00:00","date_gmt":"2023-11-03T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1714"},"modified":"2024-10-21T12:47:41","modified_gmt":"2024-10-21T19:47:41","slug":"dependency-injection-elementref","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/dependency-injection-elementref\/","title":{"rendered":"Dependency Injection: ElementRef"},"content":{"rendered":"\n

We use dependency injection daily to inject services in our Angular “objects,” such as components, directives, pipes, and other services. <\/p>\n\n\n\n

Angular does offer other kinds of injectables, though, and one of those is the ElementRef<\/a><\/code>. Its primary purpose is to give us direct access to the native DOM element of a component or a directive.<\/p>\n\n\n\n

Here’s a code example (you can test it in Stackblitz here<\/a>):<\/p>\n\n\n

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

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

The above code changes the background color of the HTML element to red. It’s important to note that the above implementation is not ideal<\/strong>. We should use Angular data bindings for such a use case, which are a lot more readable (code example in Stackblitz here<\/a>):<\/p>\n\n\n

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

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

The Angular team doesn’t recommend using this API<\/a> either:<\/p>\n\n\n

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

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

So when should we use ElementRef<\/code>? Just like markForCheck<\/a><\/code>, it’s a last resort option, and we should use it when everything else fails. The only use case I would consider for ElementRef is when I have to interact with a non-Angular 3rd-party library,<\/a> such as a chart or a map library, after carefully checking that Angular wrappers are not available on npm<\/a> (or such wrappers do not pass my tests for good, reliable dependencies<\/a>)<\/p>\n","protected":false},"excerpt":{"rendered":"

We use dependency injection daily to inject services in our Angular “objects,” such as components, directives, pipes, and other services. Angular does offer other kinds of injectables, though, and one of those is the ElementRef. Its primary purpose is to give us direct access to the native DOM element of a component or a directive. […]<\/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,26],"tags":[],"class_list":["post-1714","post","type-post","status-publish","format-standard","hentry","category-angular","category-components","category-dependency-injection"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1714","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=1714"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1714\/revisions"}],"predecessor-version":[{"id":2207,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1714\/revisions\/2207"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}