Dynamically created component gets added as sibling

Issue

I'm working on a Ionic/Angular project where i'm trying to add components dynamically to a page. To create the component i am using the Angulars ComponentFactoryResolver. When adding the components to the view, they get added as siblings of the target container and not as children.

instrument.page.ts

@Component({
    selector: 'app-instruments',
    templateUrl: './instruments.page.html',
    styleUrls: ['./instruments.page.scss'],
})
export class InstrumentsPage implements AfterViewInit {

    instruments: Instrument[];

    @ViewChild('instrumentscontainer', { read: ViewContainerRef }) entry: ViewContainerRef;

    constructor(
        private data: DataService,
        private resolver: ComponentFactoryResolver
    ) {
        this.instruments = data.getInstruments();
    }

    ngAfterViewInit() {
        this.createComponents();
    }

    createComponents() {
        this.entry.clear();
        const factory = this.resolver.resolveComponentFactory(InstrumentCardComponent);
        this.data.getData().forEach((organization: Organization) => {
            organization.getGroups().forEach((group: Group) => {
                group.getFields().forEach((field: Field) => {
                    field.getInstruments().forEach((instrument: Instrument) => {
                        let component = this.entry.createComponent(factory);
                        component.instance.instrument = instrument;
                        component.instance.field = field;
                        console.log(component);
                    });
                });
            });
        });
    }
}

instrument.page.html

<ion-content #instrumentscontainer>
</ion-content>

Solution

I solved this issue by placing

<ng-container #instrumentcontainer></ng-container> 

inside the ion-content element from what i understood gets removed from the DOM on runtime.

Answered By - Patrick