I am following this example to display a sigmajs graph in angular: https://github.com/sim51/ng-sigma-example.

app.component.ts

import { Component } from "@angular/core";
import Graph from "graphology";
import erdosRenyi from "graphology-generators/random/erdos-renyi";
import circularLayout from "graphology-layout/circular";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "ng-sigma-example";
  graph: Graph;

  constructor() {
    this.graph = erdosRenyi(Graph, { order: 100, probability: 0.1 });
    circularLayout.assign(this.graph);
  }
}

sigma.component.ts

import {
  Component,
  OnDestroy,
  AfterViewInit,
  ElementRef,
  ViewChild,
  Input
} from "@angular/core";
import Graph from "graphology";
import { Sigma } from "sigma";

@Component({
  selector: "sigma",
  template: "<div #container></div>",
  styleUrls: ["./sigma.component.scss"]
})
export class SigmaComponent implements AfterViewInit, OnDestroy {
  @ViewChild("container") container: ElementRef | null = null;
  @Input("graph") graph: Graph = new Graph();
  sigma?: Sigma;

  ngAfterViewInit(): void {
    if (this.container)
      this.sigma = new Sigma(this.graph, this.container.nativeElement);
  }

  ngOnDestroy(): void {
    if (this.sigma) {
      this.sigma.kill();
    }
  }
}

app.component.html

<sigma [graph]="graph"> </sigma>

search.component.ts

import { 
  Component,
  OnInit,
  ElementRef,
  ViewChild,
  Input} from '@angular/core';
import { Sigma } from "sigma";
import Graph from "graphology";

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
  @ViewChild("container") container: ElementRef | null = null; // could be null -> hence needs if statement
  @Input("graph") graph: Graph = new Graph();
  @Input() // should give me the sigma instance from sigma.component.ts

  constructor() {     
  }

  ngOnInit(): void {
      // should give me access to sigma instance graph
      console.log(this.renderer?.getGraph())

  }

}

In sigma.component.ts a sigma instance is created. My questions is, how can I share the sigma instance with a sibling component search.component.ts?

Normally, I would use @input and @output decorators with an event emitter to share the graph using the parent component as a bridge. But I only have div tags in the sigma.component.ts template and I was unable to get a solution that way. I need the sigma instance to be shared any time a new sigma instance is created/changed in sigma.component.ts

Another way of sharing data between components is with a service using Observables. You can make a service which has a value that can be updated from anywhere and listen to those changes from anywhere. You can read more on https://angular.io/guide/observables.

sigmaService.ts

sigmaObservable: Subject<Sigma> = new Subject();

setSigma(receivedSigma: Sigma): {
    this.sigmaObservable.next(this.receivedSigma);
}

sigma.component.ts (don't forget to import the service and add it to the constructor)

ngAfterViewInit(): void {
    if (this.container) {
        this.sigma = new Sigma(this.graph, this.container.nativeElement);
        this.sigmaService.setSigma(this.sigma); // or create a separate variable and set it to both this.sigma and this one
    }  
}

search.component.ts (create a subscription variable and the sigma variable to populate. Populate on ngOnInit when the new value is received with a subscription and don't forget to unsubbscribe onDestroy)

_subscription: Subscription = Subscription.EMPTY;
sigmaInSearch: Sigma;

ngOnInit(): void {
    this._subscription = this.sigmaService.sigmaObservable.subscribe((sigmaValue) => {
        this.sigmaInSearch = sigmaValue;
    });
}

ngOnDestroy(): void {
    this._subscription.unsubscribe();
}