{"componentChunkName":"component---src-templates-blog-post-js","path":"/angular-structural-vs-attribute-directives/","result":{"data":{"site":{"siteMetadata":{"title":"Undefined","author":"Anirudh Varma"}},"markdownRemark":{"id":"8bbb7cb2-df8c-533f-8698-0fad87a403e3","excerpt":"Anyone who has worked with Angular would have used directives. According to the the official \nAngular documentation, there are 3 types of Directives: Components…","html":"

Anyone who has worked with Angular would have used directives. According to the the official\nAngular documentation, there are 3 types of Directives:

\n\n

This post primarily documents creating and using custom Structural Directives and how it differs with respect to the more commonly used attribute directive.

\n

What are structural directives?

\n

As the name suggests, structural directives are responsible for manipulating the DOM structure by adding, removing or changing the elements they are attached to. Perhaps the most common structural directive most Angular developers use the ngIf directive, which is used to show/hide the elements based on a boolean condition.

\n
\n

Beginner tip: The structural directives are prefixed with a * while attribute directives may be used just by adding their selector as an attribute to the element.

\n
\n

Creating your own structural directive.

\n

Lets assume that you have a payment configuration based on which you want to show or hide certain elements for certain users. We will create a directive, which will take an input for a feature flag and then show or hide the element based on the payment configuration.

\n

Creating a structural directive is pretty similar to creating an attribute directive.

\n
@Directive({ selector: '[appRenderIfEnabled]'})\nexport class RenderFeatureDirective implements OnInit{\n\n    private flag: string;\n\n    @Input()\n    set appRenderIfEnabled(flag: string){\n        this.flag = flag;\n    }\n\n    constructor(\n        private templateRef: TemplateRef<any>,\n        private viewContainer: ViewContainerRef,\n        private configService: ConfigService\n    ) {}\n\n    ngOnInit(){\n        this.configService.isEnabled(this.flag).subscribe(enabled=>{\n            if(enabled){\n                this.viewContainer.createEmbeddedView(this.templateRef);\n            } else {\n                this.viewContainer.clear();\n            }\n        });\n    }\n}
\n

As you can see, the directive takes one input, the name of which must match with the selector that you choose (appRenderIfEnabled) in this case.\nThe directive gets the reference to a TemplateRef and a ViewContainer, this is because a directive creates an embedded view inside the given ViewContainer and the TemplateRef is used to access the contents of the template/element the directive is attached to.

\n

Now the custom directive is ready to be used, add it to any component like:

\n
<my-pro-version-component *appRenderIfEnabled=\"'PRO_PACKAGE_ONLY'\"></my-pro-version-component>
\n

Using additional @Input with your directive.

\n

Till now, our directive is just taking the flag as an input, but what if you want to be able to provide a default value incase of missing configuration?

\n

The key part of having additional inputs in structural directives is that the name of the input property must be prefixed with the selector. In our case, we want a defaultConfig, so the name of the input property would be appRenderIfEnabledDefaultConfig.

\n
@Directive({ selector: '[appRenderIfEnabled]'})\nexport class RenderFeatureDirective implements OnInit{\n\n    private flag: string;\n    private defaultConfig = false;\n\n    @Input()\n    set appRenderIfEnabled(flag: string){\n        this.flag = flag;\n    }\n\n    // must be prefixed with selector\n    @Input()\n    set appRenderIfEnabledDefaultConfig(conf:boolean){\n        this.defaultConfig = conf;\n    }
\n

The new input can be simply added using the following syntax:

\n
<my-pro-version-component *appRenderIfEnabled=\"'PRO_PACKAGE_ONLY';defaultConfig: true\"></my-pro-version-component>
\n

Useful links -

\n","frontmatter":{"title":"Strucural vs Attribute Directives in Angular","date":"January 03, 2019","ogimage":null}}},"pageContext":{"slug":"/angular-structural-vs-attribute-directives/","previous":{"fields":{"slug":"/bolt-content-and-relations/"},"frontmatter":{"title":"Bolt CMS: Using content types and relations"}},"next":{"fields":{"slug":"/align-items-vs-content-flexbox/"},"frontmatter":{"title":"Flexbox - Align Items vs Align Content."}}}},"staticQueryHashes":["426816048","983108779"]}