{"id":1289,"date":"2023-08-08T05:00:00","date_gmt":"2023-08-08T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1289"},"modified":"2023-08-07T16:03:53","modified_gmt":"2023-08-07T23:03:53","slug":"how-to-create-custom-directives","status":"publish","type":"post","link":"http:\/\/www.angulartraining.com\/daily-newsletter\/how-to-create-custom-directives\/","title":{"rendered":"How to create custom directives?"},"content":{"rendered":"\n

I’ve touched on when it makes sense to create custom directives<\/a> , how to use bindings in directives<\/a>, and how to get creative with Angular selectors<\/a>. <\/p>\n\n\n\n

Today, let’s tackle how to create custom directives. The first thing to do is to use the Angular CLI:<\/p>\n\n\n\n

ng generate directive [name]<\/code> <\/p>\n\n\n\n

or ng g d [name]<\/code><\/p>\n\n\n\n

It’s also possible to generate standalone directives<\/a> with the --standalone<\/code> option:<\/p>\n\n\n\n

ng generate directive [name] --standalone<\/code><\/p>\n\n\n\n

Once you’ve done that, you end up with an empty class to implement:<\/p>\n\n\n\n

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

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

At that point, it’s important to remember that a directive is just like a component. The only difference is that a directive doesn’t have an HTML template. As a result, we can still use @Input()<\/code>, @Output()<\/code>, and all sorts of bindings and listeners<\/a>.<\/p>\n\n\n\n

As a result, your directive will manipulate HTML attributes and events on its host element. Here is a typical example of a custom directive that sets a credit card logo image based on a credit card number:<\/p>\n\n\n\n

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

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

Its source code looks like this:<\/p>\n\n\n\n

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

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

As you can see, we use an @Input()<\/code> to receive the cardNumber <\/strong>and a host binding to change the value of the src<\/code> attribute. You can find a step-by-step tutorial<\/a> that explains the above code in more detail here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

I’ve touched on when it makes sense to create custom directives , how to use bindings in directives, and how to get creative with Angular selectors. Today, let’s tackle how to create custom directives. The first thing to do is to use the Angular CLI: ng generate directive [name] or ng g d [name] It’s […]<\/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],"tags":[],"class_list":["post-1289","post","type-post","status-publish","format-standard","hentry","category-angular","category-directives"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1289"}],"version-history":[{"count":4,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1289\/revisions"}],"predecessor-version":[{"id":1296,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1289\/revisions\/1296"}],"wp:attachment":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1289"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}