Component reusable issue in Angular

Question

I am new to angular reusable components and am unsure how to reuse the component once it's built. I have 3 components parent, container and reusable components.

parent.component.ts

reUsableContent: any;

ngOnInit(): void {
        this.reUsableContent = ReUsableContentComponent;
}

parent.component.html

<app-container [reUsableContent]="ReUsableContentComponent"></app-container>

container.component.html

<ng-container *ngTemplateOutlet="reUsableContent"></ng-container>

container.component.ts

@Input() reUsableContent: TemplateRef<any>;   

resusable.component.html

<ng-template #reUsableContent>
    <p>Reusable content works!</p>
</ng-template>

I am not sure if this is the way to make the reusable component. The above does not work. What is missing from the above?

Answer 1

1. First thing

TemplateRef is not the same as ReUsableContentComponent

I think you need to get familiar with this: https://marketsplash.com/tutorials/typescript/typescript-how-to-create-a-templaterref-object/

2. Second thing

https://angular.io/guide/dynamic-component-loader

Try to utilize NgComponentOutlet