canvasManagement/Management.Web/Shared/Module/ModuleDetail.razor

@using Management.Web.Shared.Module.Assignment
@using LocalModels

@inject CoursePlanner configurationManagement
@inject CoursePlanner planner

@code {
  [Parameter, EditorRequired]
  public LocalModule Module { get; set; } = default!;

  protected override void OnInitialized()
  {
    planner.StateHasChanged += reload;
  }
  private void reload()
  {
    this.InvokeAsync(this.StateHasChanged);
  }
  public void Dispose()
  {
    planner.StateHasChanged -= reload;
  }

  private string accordionId {
    get => Module.Name.Replace(" ", "") + "-AccordionItem";
  }

}

<div class="accordion-item">

  <h2 class="accordion-header">
    <button 
      class="accordion-button" 
      type="button" 
      data-bs-toggle="collapse" 
      data-bs-target="@("#" + accordionId)" 
      aria-expanded="true" 
      aria-controls="@accordionId"
    >
      @Module.Name
    </button>
  </h2>
  <div 
    id="@accordionId" 
    class="accordion-collapse collapse" 
  >
    @* data-bs-parent="#modulesAccordion" include to limit expanded sections *@
    <div class="accordion-body pt-1">

      <div class="row m-1">
        <div class="col my-auto">
          <h5>Assignments</h5>
        </div>
        <div class="col-auto">
          <NewAssignment 
            Module="Module" 
          />
        </div>
      </div>
      
      <div class="row">
      @foreach (var a in Module.Assignments)
      {
        <AssignmentDetails Assignment="a" Module="Module" />
      }
      </div>
    </div>
  </div>
</div>