Angular Dynamic Component, insert before another component

Question

I have an Angular7 app where users can reorder tabs of a table with drag&drop. When we drag a tag over another tab, I would like to insert, after or before the hovered tab (depends on the position of the dragged tab compared to the hovered), a preview component, which is just a component with a small HTML block to indicate where the tab is going to be drop.

I use dynamic component for that, I have dragenter event on tabs where I call a service who create the dynamic component.

DragEnter event on tab :

private dragEnterElement = (e: DragEvent): void => {        
 this.dragService.setRootViewContainerRef(this.dragElementviewContainerRef);
 this.dragService.addDynamicComponent();
}

The service :

public setRootViewContainerRef = (viewContainerRef): void => {
    this.rootViewContainer = viewContainerRef;
}

public addDynamicComponent = (): void => {
    const factory = this.factoryResolver.resolveComponentFactory(PreviewDragTabComponent);
    const component = factory.create(this.rootViewContainer.parentInjector);
    this.rootViewContainer.insert(component.hostView);
}

This works very well to insert the preview component AFTER the hovered tab, but I have not found a way to insert the component BEFORE the hovered tab.

Would anyone know if there is a way to do that with angular dynamic component ?

Thanks for your help