DEV Community

Discussion on: Headless Angular Components

Collapse
patelvimal profile image
vimal patel

Awesome article, Can you share how to use directly rather than a structural directive in this use case? How to pass context in that case?

Collapse
haydenbr profile image
Hayden Braxton Author

Thanks for reading 😀

Context is a feature of angular Templates, so if you want to pass context around you have to use templates at least. The structural directive is just kind of a syntactically nice way of creating a template and getting context. Unfortunately, templates aren't described super well in Angular documentation :(

Without a structural directive, you use templates directly. With that, you end up with

<ng-template let-context>
</ng-template>
Enter fullscreen mode Exit fullscreen mode

instead of

<my-component *callbackTemplate="let context">
</my-component>
Enter fullscreen mode Exit fullscreen mode

If you want to see more about this strategy, you can read Stephen's article here. Under the hood, these are both doing the same thing, just a difference in syntax. But either way, you have to have templates.

Collapse
patelvimal profile image
vimal patel

Thank you so much for wonderful explanation.