How to avoid circular dependency (particular case)

Question

I'm currently working on a webapp with a dashboard and some widgets. We use ng-dynamic-component to show our widgets.

In a widget (ComputeWidgetComponent) I have a function that show the widget in a fullscreen modal (FullscreenComponent), what I'm doing currently is that I recreate the ComputeWidgetComponent in the FullscreenComponent (with all the variables passed by Inputs), it works well but I have a warning for circual dependency :

ComputeWidgetComponent -> FullscreenComponent -> ComputeWidgetComponent

Is there maybe a solution to my case ?

Is this possible to pass the instance of my current widget to the FullscreenComponent who will show the "same" instance without using the component ?

If it's possible this would be the best solution for me, because currently I recreate the widget so he needs to compute the data again (by my backend), it will be really cool if I can pass the component as it is actually but show it in the modal.

EDIT:

I'm still working on it, here is what I've done:

From the parent I open a modal in fullscreen and pass the instance of my widget:

 dialogRefFullscreen: MatDialogRef<FullscreenComponent>;
 // The widgets components
  @ViewChildren(DynamicComponent) components: QueryList<DynamicComponent>;

  constructor(
    private workspaceService: WorkspaceService,
    private snackbarService: SnackbarService,
    private dialog: MatDialog,
  ) {}

...

this.dialogRefFullscreen = this.dialog.open(FullscreenComponent, {
  disableClose: true,
  autoFocus: false,
  maxWidth: "100vw",
  maxHeight: "100vh",
  height: "100%",
  width: "100%",
  data: {
    instance: this.components.first.componentRef.instance,
    componentType: WidgetComponent,
  }
});

Then in my fullscreen component :

export class FullscreenComponent implements OnInit {

  @ViewChildren("component", { read: ViewContainerRef }) entryTables: QueryList<ViewContainerRef>;
  componentInstance: ComponentRef<any>;
  constructor(
    public dialogRef: MatDialogRef<FullscreenComponent>,
    @Inject(MAT_DIALOG_DATA) public dataDashboard: any,
    private resolver: ComponentFactoryResolver
  ) {
  }

  ngOnInit() {
    console.log(this.dataDashboard.instance);
  }

  ngAfterViewInit() {
    this.entryTables.toArray()[0].clear();
    this.componentInstance = this.entryTables.toArray()[0].createComponent(
      this.resolver.resolveComponentFactory(this.dataDashboard.componentType));
    this.componentInstance.instance.setWidgetConfiguration(this.dataDashboard.instance.widgetConfiguration);  

  }


  closeDialog() {
   this.dialogRef.close(this.componentInstance.instance);
  }
}

and the html:

<div #component></div>

It's almost working, I can get the component and show it, the problem is that I have to pass all the data one by one with setters from the instance to the componentInstance, I don't find a solution just to use the same instance

And a minor problem is that when I open my widget in fullscreen it "recreate" it so ngOnInit and constructors are launched and triggers my compute again :/