A problem of generic structural directive is that we loose the type information. Unlike our typescript code we can not pass the generic type info in the html template. This article discusses an approach how to keep the type information. — In my last blog article I wrote an introduction to structural directives. This blogpost builds upon the knowledge we learned there. In a structural directive we can receive content in order to use it in our projected template.

This blogpost demonstrates different approaches how to build re-usable components with a simple example. This is a two part blogpost. In the second part it is getting more advanced and we have a look how to utilise structural directives to build a re-usable options button component with a simple interface. — An important part of building scaleable web applications, is creating your own toolbox of re-usable components. However, building re-usable components is not always easy because they might have to fit different requirements.

In this part we take a look at structural directives and how we can use them to build even more generic components. In the first part we discussed other approaches to build a re-usable component. — What is a structural directive? A structural directive is defined like any other directive but with one major difference: In the constructor TemplateRefand/or ViewContainerRef is injected. TemplateRef allows to access the projected DOM content of the element where the structural directive is applied on, whereas ViewContainerRef is the service that allows to render any given…