https://ng-journal.com/blog/2022-11-28-strongly-typed-ng-template-outlet/

[utterances-bot]

Strongly Typed ngTemplateOutlet

The ngTemplateOutlet can be used to project content into a component and therefore generic components such as tables commonly use them. But achieving strong typing is not trivial at all and needs some little TypeScript tricks.

https://ng-journal.com/blog/2022-11-28-strongly-typed-ng-template-outlet/

[Tashkk5]

Hi Stefan, thanks for writing this low level detail topic. I am from a Lead background and I highly value the level of complexity that a certain functionality impacts. I love the idea of making the template identifier compiler safe by using a custom directive instead of a hardcoded and error prone string.

My Questions are:

1) In a use-case where our re-useable component has multiple templates being passed into its content, wouldn't this add a lot more code in form of multiple directives with additional code to have them in the module file.

2) Similar to point#1, In terms of scalability, it will be added overhead to create a new directive with every new template that we want to pass in the component content.

3) How do you compare passing templates in content vs @Input() in the context of my questions above.

Thanks again, for igniting my curiosity in this subject :)

[HaasStefan]

Hi @Tashkk5,

1 & 2. I don't think a component would have that many templates that I would be concerned about the additional directives. I usually have at most 3 ngTemplateOutlets, (header, main, footer for example for a dialog, or a card).

3. I would use content childs in combination with directives because they make for more safety. Anyways, both are fine for real.

Hope this answers your questions!