{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/create-custom-directive-angular/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"1391ca31-71e9-50de-8880-84c95b074ac2","excerpt":"In this article i will explain you how you can create custom directive in angular application, i will create a custom dropdown directive. Step 1: Create a file…","html":"<p>In this article i will explain you how you can create custom directive in angular application, i will create a custom dropdown directive.</p>\n<h4>Step 1: Create a file for your custom directive</h4>\n<ul>\n<li>\n<p>Create a file with the name <strong><em>src/directives/dropdown.directive.ts</em></strong> and add the following piece of code</p>\n<ul>\n<li>\n<p>First need to import Directive decorator from angular core</p>\n</li>\n<li>\n<p>@Directive is the decorator which tells that class is directive class</p>\n</li>\n<li>\n<p>selector is where we define the name of directive</p>\n</li>\n<li>\n<p>@HostBinding attach property to html element on which directive is applied</p>\n</li>\n<li>\n<p>@HostListener listen to the event of html element on which directive is applied</p>\n</li>\n<li>\n<p>Here we are toggling class <code>open</code> on click of the button that is host listener</p>\n</li>\n</ul>\n</li>\n</ul>\n<pre><code class=\"language-ts\">import { Directive } from \"@angular/core\";\n@Directive({\n  selector: \"[appDropdown]\",\n})\nexport class DropdownDirective {\n  @HostBinding(\"class.open\") isOpen = false;\n  @HostListener(\"click\") toggleOpen() {\n    this.isOpen = !this.isOpen;\n  }\n}\n</code></pre>\n<h4>Step 2: Add the directive declaration inside your component parent module</h4>\n<ul>\n<li>Once we have created the above directive now we need to declare inside app.module.ts or any other module which is the parent module of your current component on which the directive is applied</li>\n</ul>\n<pre><code class=\"language-ts\">import { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\n\nimport { AppComponent } from \"./app.component\";\nimport { DropdownDirective } from \"./directives/dropdown.directive\";\n\n@NgModule({\n  declarations: [AppComponent, DropdownDirective],\n  imports: [BrowserModule, FormsModule],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n</code></pre>\n<h4>Step 3 Use the directive inside your component html</h4>\n<ul>\n<li>I have added the appDropdown directive along with class=\"btn-group\" html property this is how we attach directive to html element there are also otherways of attaching directive but that depends upon types of directive we are using</li>\n</ul>\n<pre><code class=\"language-html\">&#x3C;div class=\"container\">\n  &#x3C;div class=\"row\">\n    &#x3C;div class=\"col-xs-12 \">\n      &#x3C;div class=\"btn-group\" appDropdown>\n        &#x3C;button\n          type=\"button\"\n          class=\"btn btn-danger dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Action\n        &#x3C;/button>\n        &#x3C;div class=\"dropdown-menu\">\n          &#x3C;a class=\"dropdown-item\" href=\"#\">Action&#x3C;/a>\n          &#x3C;a class=\"dropdown-item\" href=\"#\">Another action&#x3C;/a>\n          &#x3C;a class=\"dropdown-item\" href=\"#\">Something else here&#x3C;/a>\n          &#x3C;div class=\"dropdown-divider\">&#x3C;/div>\n          &#x3C;a class=\"dropdown-item\" href=\"#\">Separated link&#x3C;/a>\n        &#x3C;/div>\n      &#x3C;/div>\n    &#x3C;/div>\n  &#x3C;/div>\n&#x3C;/div>\n</code></pre>","fields":{"slug":"/create-custom-directive-angular/"},"frontmatter":{"title":"How to create custom directive in angular","date":"April 30, 2022","description":"In this article i will explain you how you can create custom directive in angular","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/creating-custom-directive-angular.jpeg"}},"previous":{"fields":{"slug":"/adding-stripe-payment-in-react-application/"},"frontmatter":{"title":"Adding stripe payment in react application","date":"April 20, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/stripe-react.jpeg"}},"next":{"fields":{"slug":"/create-custom-pipe-angular/"},"frontmatter":{"title":"How to create custom pipe in angular","date":"May 10, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/custom-pipe-in-angular.jpeg"}}},"pageContext":{"id":"1391ca31-71e9-50de-8880-84c95b074ac2","previousPostId":"2b4f6f36-50c5-59ab-8fe8-e62eea1f4fa0","nextPostId":"420f4ce5-7f37-5153-8b49-85d5231fdcc8"}},
    "staticQueryHashes": ["3860684146"]}