I created 2 customizable css grids that I want to use throughout my project. The problem is my content in the grid projected using ng-content isn't displaying in my second grid when I am using a new ngSwitchCase. Any thoughts on how to fix this? I would love the feedback, and I made a stackblitz below...
https://stackblitz.com/edit/angular-ivy-qm6qmj?file=src/app/template/template.component.html
UPDATE: I also created another stackblitz using ngTemplateOutlet and everything works EXCEPT I am not sure how to position my image place-holder text in the left panel of my grid (or any content for that matter) instead of where it is currently which is in the right panel of the grid. This part worked perfectly with ng-content select in my first example but I am not sure how to solve this using ngTemplateOutlet! Here is the second stackblitz...
https://stackblitz.com/edit/angular-ivy-3gh45b?file=src/app/template/template.component.html
So in summary, the first stackblitz has the content layed out exactly how I want it to be but I can't create another switchcase since ng-content seems limited in this scenario, while the second stackblitz lets me use ngswitch and has all the data displayed as I intended when I change through grid1 or grid2, but it isn't layed out correctly! I would love to have the best of both worlds from both stackblitz where the content is layed out perfectly where I want it while still using ngswitch! If anyone has a solution, would definitely appreciate it!!
You were pretty much there. You just needed to add an ng-content in your <ng-template #content> that selects the image placeholder:
<ng-template #content>
<ng-content select=".img"></ng-content>
</ng-template>
Then the .img element will be projected into that template, and the remaining content will be projected into your <ng-template #template> that has just ng-content with no selector.
Here's a fork of your second StackBlitz that I think does what you're looking for.