{"id":1004,"date":"2023-05-29T05:00:00","date_gmt":"2023-05-29T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1004"},"modified":"2023-05-22T14:47:11","modified_gmt":"2023-05-22T21:47:11","slug":"hostbinding-and-hostlistener","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/hostbinding-and-hostlistener\/","title":{"rendered":"HostBinding and HostListener"},"content":{"rendered":"\n

A few months back, I suggested that Angular developers don’t use enough directives and use too many components<\/a>. This is because components quickly become second nature when writing Angular code, while directives are less common and, as a result, can feel more complex at first.<\/p>\n\n\n\n

The critical difference between components and directives is that components have an HTML template<\/strong>, and directives don’t. That lack of a template can be slightly uncomfortable at first unless you realize that you still have access to HTML attribute bindings but in a different manner.<\/p>\n\n\n\n

For instance, let’s consider the following component template: <\/p>\n\n\n

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

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

Those two bindings used in a directive would become:<\/p>\n\n\n

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

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

In other words, when you see a binding with []<\/code> in a component, @HostBinding()<\/code> does the same thing in a directive.<\/p>\n\n\n\n

For example: [id]=\"testId\"<\/code> in a component template becomes @HostBinding(\"id\") testId;<\/code> in a directive class.<\/p>\n\n\n\n

The same goes for event listeners. This component (click)<\/code> binding:<\/p>\n\n\n

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

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

Becomes the following in a directive:<\/p>\n\n\n

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

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

As a recap: []<\/code> become @HostBinding<\/code> and ()<\/code> become @HostListener<\/code>. Those are the same thing. That’s it. No template is needed. For a real-life example of a custom directive, feel free to take a look at this tutorial of mine<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

A few months back, I suggested that Angular developers don’t use enough directives and use too many components. This is because components quickly become second nature when writing Angular code, while directives are less common and, as a result, can feel more complex at first. The critical difference between components and directives is that components […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11,7],"tags":[],"class_list":["post-1004","post","type-post","status-publish","format-standard","hentry","category-angular","category-directives","category-template-syntax"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1004","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=1004"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1004\/revisions"}],"predecessor-version":[{"id":1012,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1004\/revisions\/1012"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}