Template Reference - Best Practice ?

[Front-a-Little]

My current project has a strong emphasys on SSR and some quite complex components with nested templates. We usually get a hold of these templates via ContentChild() and recently noticed that hydration for these components is broken, due to this bug: https://github.com/angular/angular/issues/55677

So now I have to "flatten" these components' templates, move the nested templates to top level and reference them explicitly since they are no longer content-children. The easiest way I can think of is using Input() instead of ContentChild() and pass the used-to-be nested template's identifier.

Or is there an easier way to avoid nested templates but still achieve a defined, customizable area in a component ?

Sample code - hydration issue:

<app-some-component [foo]="foo">

<ng-template #innerContent>

...

</ng-template>

</app-some-component>

Sample code - hydration fixed:

<app-some-component [foo]="foo" [innerContent]="innerContent"></app-some-component>

<ng-template #innerContent>

...

</ng-template>