Mischehe

<link
  rel="stylesheet"
  href="https://unpkg.com/@ag-grid-community/
    all-modules@23.0.0/dist/styles/ag-grid.css" />

<link
  rel="stylesheet"
  href="https://unpkg.com/@ag-grid-community/
    all-modules@23.0.0/dist/styles/
    ag-theme-alpine.css" />
<button (click)="getSelectedRows()">OK</button>
<ag-grid-angular
    #agGrid
    style="width: 650px; height: 500px;"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    rowSelection="multiple"
>
</ag-grid-angular>

import { Component, OnInit, Input, Output,
  OnChanges, SimpleChanges, ViewChild,
  EventEmitter  } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent implements OnInit,
  OnChanges {
 
  public  static gridCount : number = 0;
  @ViewChild('agGrid') agGrid: AgGridAngular;

  constructor(private http: HttpClient) {
    GridComponent.gridCount++;
    console.log("==== Grid #" +
      GridComponent.gridCount) 
  }

  ngOnInit(): void {
  console.log("ngOnInit!",    this.columnDefs,
    this.rowData );
  }

  @Input()
  columnDefsString : string
  @Input()
  rowDataString : string;
  @Output()
  selectedRowsChanged = new EventEmitter();

  columnDefs : any;
  rowData : any; 

  ngOnChanges() {
    console.log("ngOnChanges Beginn in Grid #" +
      GridComponent.gridCount + ":",
      this.columnDefsString,this.rowDataString);

    if (this.columnDefsString)    {
      try
      {
        this.columnDefs =
          (JSON.parse(this.columnDefsString));
      }
      catch
      {
        console.warn("Cannot parse columnDefsString",
          this.columnDefsString );
      }
    }

    if (this.rowDataString)    {
      try
      {
        this.rowData =
          (JSON.parse(this.rowDataString));
      }
      catch
      {
        console.warn("Cannot parse rowDataString",
          this.rowDataString );
      }
    }
    console.log("ngOnChanges End in Grid #" +
      GridComponent.gridCount + ":",
      this.columnDefs,this.rowData);
    }

    getSelectedRows() {
      const selectedNodes =
        this.agGrid.api.getSelectedNodes();
      const selectedData =
        selectedNodes.map(node => node.data );
      this.selectedRowsChanged.emit(selectedData);
  }
}

import { BrowserModule } from
  '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from
  "@angular/elements";
import { AppComponent } from './app.component';

import { AgGridModule } from 'ag-grid-angular';
import { GridComponent } from
  './grid/grid.component';

@NgModule({
  imports: [
    BrowserModule, HttpClientModule,
      AgGridModule.withComponents([])
  ],
  providers: [  ],
  bootstrap: [],
  entryComponents:[
    GridComponent
  ],
  declarations: [GridComponent]
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
  ...
    const el = createCustomElement(
      GridComponent, { injector: this.injector });
    customElements.define('angular-grid', el);
  }
}

<h4> Web Component <angular-grid></h4>

<span class="row">
  <span class="col-xs-4">
    <input type="text" @bind="searchName" />
    <button @onclick="LoadDataInAngularGrid">Load data
      from Star Trek API (STAPI.co)</button>
    <angular-grid column-Defs-String='@Header'
      row-data-string='@GridData'></angular-grid>
  </span>
  <span class="col-xs-4">
    Ausgabe JS: <span id="gridResultJS"></span><0x000A>
    Ausgabe C#: <span id="">@gridResultCS</span>
  </span>
</span>

@code
{
  string Header = "[{\"field\":\"name\"},
    {\"field\":\"alternateReality\"},
    {\"field\":\"yearOfDeath\"}]";
  string searchName = "";
  string GridData = "";
  string gridResultCS { get; set; }
 
  IJSObjectReference script1;
  IJSObjectReference script2;

  protected override async Task
      OnAfterRenderAsync(bool firstRender) {
    if (firstRender)
    {
      // Skripte laden!
      script1 = await
        JSRuntime.InvokeAsync<IJSObjectReference>(
          "import",
          "/_content/MLBlazorRCL/ITVElements.js");
      script2 = await
        JSRuntime.InvokeAsync<IJSObjectReference>(
          "import",
          "/_content/MLBlazorRCL/
            ITVElementsGlueCode.js"); 
      _objectReference =
        DotNetObjectReference.Create(this);
      // Initialisieren Eventhandler für beide Instanzen
      await script2.InvokeVoidAsync("init",
        _objectReference, c1);
      await script2.InvokeVoidAsync("init",
        _objectReference, c2);
    }
  }

  public async void LoadDataInAngularGrid() {
    util.Log("Loading data...");

    // Eventhandler einrichten
    var _objectReference = DotNetObjectReference
      .Create(this);
    await script2.InvokeVoidAsync("initGrid",
      _objectReference);
    // Daten Laden vom API
    var formContent = new FormUrlEncodedContent(new[] {
      new KeyValuePair<string, string>("name",
        this.searchName) //, new KeyValuePair<string,
        string> //("placeOfBirth", "Earth")
    });
    HttpResponseMessage response =
      await httpClient.PostAsync(
        "http://stapi.co/api/v1/rest/character/search",
        formContent);
    string text =
      await response.Content.ReadAsStringAsync();
    // Daten filtern
    System.Text.Json.JsonDocument json =
      System.Text.Json.JsonDocument.Parse(text);
    var characters = json.RootElement
      .GetProperty("characters").ToString();
    // Daten an Grind binden
    this.GridData = characters;
    this.StateHasChanged(); // WICHTIG!
  }

  public record StarTrekCharacter {
    public string Name { get; init; }
    public bool AlternateReality { get; init; }
    public int? YearOfDeath { get; init; }
  }

  // Eventhandler für selectedRowsChanged-Ereignis
  // der Web Component <angular-grid>. JSON wird auf
  // Record abgebildet!
  [JSInvokable]
  public void NewSelection(
    List<StarTrekCharacter> data) {
    util.Log(data);

    var selectedDataStringPresentation = String.Join(
      ", ", data.Select(x => x.Name + ' ' +
      x.AlternateReality + ' ' +
      x.YearOfDeath).OfType<string>().ToArray());

    gridResultCS = selectedDataStringPresentation;
    this.StateHasChanged();
    util.Log(gridResultCS);
  }

  // Alternativer Eventhandler für
  // selectedRowsChanged-Ereignis der Web Component
  // <angular-grid>, mit JSON statt Typen
  [JSInvokable]
  public void NewSelection2(
      List<System.Text.Json.JsonElement> data) {

    util.Log(data);
    var selectedDataStringPresentation = String.Join(
      ", ", data.Select(x =>
        x.GetProperty("name").ToString() + ' ' +
        x.GetProperty("alternateReality").ToString() +
        ' ' + x.GetProperty("yearOfDeath").ToString())
      .OfType<string>().ToArray());

    gridResultCS = selectedDataStringPresentation;
    this.StateHasChanged();
    util.Log(gridResultCS);
  }
}

export function initGrid(dotNet) {
  // finde das Grid
  var e = document.querySelector('angular-grid');
  // binde die Ereignisbehandlung
  e.addEventListener(
    "selectedRowsChanged", function (eventData) {
    console.log('selected-Rows-Changed event
      fired!', eventData);
    // Behandlung des Ereignisses in JS, hier als
    // Beispiel: direktes Ändern des DOM
    const selectedDataStringPresentation = eventData
      .detail.map(node => node.name + ' ' +
      node.alternateReality + ' ' +
      node.yearOfDeath).join(', ');
    document.getElementById("gridResultJS").innerText
      = selectedDataStringPresentation;
    // Weitergabe des Ereignisses an C# an die
    // Methode NewSelection
    dotNet.invokeMethodAsync("NewSelection",
      eventData.detail).then(data => {console.log(
        "JS: Ereignis an .NET gesendet!");});
  });
}