How to use ng-template across different components

How can I render an <ng-template> in different components. Let's say I have component test as the following:

test.html

<ng-template #content >
<p> Hello world </p>
</ng-template>



test.ts

@Component({
selector: 'test',
templateUrl: './test.component.html',
standalone: true,
})
export class TestComponent implements OnInit {}


Now I want to render it in component A. This is what I've tried (and many other more complicated versions that didn't work, so I keep the question with this simplest version):

A.html:

<test>
<ng-container *ngTemplateOutlet="content"></ng-container>
</test>



The error that I get is :

Property 'content' does not exist on type 'AComponent'.
<ng-container *ngTemplateOutlet="content"></ng-container>


I think this must be very simple to solve but I've checked the guideline in this post, this solution, and some other tutorials but none of them worked ...

Continue reading...