{"id":475,"date":"2023-02-13T05:00:00","date_gmt":"2023-02-13T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=475"},"modified":"2023-02-09T16:08:05","modified_gmt":"2023-02-10T00:08:05","slug":"when-to-create-a-directive-vs-a-component","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/when-to-create-a-directive-vs-a-component\/","title":{"rendered":"When to create a directive vs. a component?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Most Angular applications are composed of a majority of components and just a few directives if any. Today, I&#8217;d like to show you an example where a directive makes much more sense than a component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Consider the following component template:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"148\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-20.png\" alt=\"\" class=\"wp-image-479\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-20.png 662w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-20-300x67.png 300w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">We have created a component tied to one single HTML element (button), and all the logic in that template is about changing attribute values (for the <code>isActive<\/code> class and the <code>disabled<\/code> attribute).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To achieve this, we needed three specialized inputs that resulted in a loss of reusability:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"352\" height=\"265\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-21.png\" alt=\"\" class=\"wp-image-480\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-21.png 352w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-21-300x226.png 300w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The above isn&#8217;t ideal because:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Our button can only display text, not any HTML (so no icons, for instance)<\/li>\n\n\n\n<li>Our button assumes that its state always depends on <code>saved<\/code> and <code>hasError<\/code>, but what if we want to add a third variable to the mix for other use cases?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s create a directive instead:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"397\" height=\"508\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-22.png\" alt=\"\" class=\"wp-image-481\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-22.png 397w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-22-234x300.png 234w\" sizes=\"auto, (max-width: 397px) 100vw, 397px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Which would be used like so:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"452\" height=\"83\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-23.png\" alt=\"\" class=\"wp-image-482\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-23.png 452w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-23-300x55.png 300w\" sizes=\"auto, (max-width: 452px) 100vw, 452px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">This implementation is a lot better because:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It would work with any HTML element, not just buttons (assuming the element supports <code>disabled<\/code> properly)<\/li>\n\n\n\n<li>The button can display anything, not just text<\/li>\n\n\n\n<li>The criteria for <code>isActive<\/code> to be true depends on the use case and isn&#8217;t tied to just <code>saved<\/code> and <code>hasError<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The point here is that <strong>using a directive in that scenario made our code more flexible, and as a result, more reusable.<\/strong> That&#8217;s<strong> <\/strong>why popular component libraries rely heavily on directives rather than components. Here&#8217;s an example from the <a href=\"https:\/\/material.angular.io\/components\/button\/overview\" target=\"_blank\" rel=\"noopener\" title=\"\">Angular Material documentation<\/a>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-25.png\" alt=\"\" class=\"wp-image-484\" width=\"740\" height=\"45\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-25.png 740w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-25-300x18.png 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">You can see that <code>mat-button<\/code> is a directive, not a component. That way, it can be used with a <code>button<\/code> or an <code>a<\/code> tag. You can find the example code of this post <a href=\"https:\/\/stackblitz.com\/edit\/angular-ln42zm?file=src%2Fmain.ts,src%2Factive.directive.ts,src%2Fglobal_styles.css,src%2Fmy-button%2Fmy-button.component.ts\" target=\"_blank\" rel=\"noopener\" title=\"\">on Stackblitz<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Think about this the next time you&#8217;re tempted to create a component with one or two lines of HTML in its template. Most likely, what you need instead is a directive.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Check out this <a href=\"https:\/\/blog.angulartraining.com\/tutorial-how-to-create-your-own-angular-directive-3532d7f31fab\" target=\"_blank\" rel=\"noopener\" title=\"\">tutorial for another example of a directive<\/a> that makes perfect sense instead of using a component.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most Angular applications are composed of a majority of components and just a few directives if any. Today, I&#8217;d like to show you an example where a directive makes much more sense than a component. Consider the following component template: We have created a component tied to one single HTML element (button), and all the [&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,21,8,11],"tags":[],"class_list":["post-475","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-components","category-directives"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/475","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=475"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/475\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}