How to add ‘open’ attribute in ‘detail’ tag dynamically in Angular14+

I have this sidenav component code below. Is made using details and summary tags.

It’s giving a bug when li tag is clicked and the description just open when the click is on the details.
So I want to make a verification when li is clicked and add ‘open’ attribute to the details tag.

But it’s not working and I don’t how how to fix this. Someone can help me? =(

When I try use setAttribute or just set open attribute manually and reading it’s returned to me these errors:

core.mjs:7643 ERROR TypeError: Cannot read properties of undefined (reading ‘attributes’)
core.mjs:7643 ERROR TypeError: e.target.children.setAttribute is not a function

side-nav.html

<div class="side-nav-content">
  <ul class="nav-list" [ngClass]="{ 'nav-list-open': sideNavStatus }">
    <a class="nav-list-item" (click)="sideNavStatus = !sideNavStatus">
      <img src="{{ changeSideNavButton() }}" alt="Menu burguer icon" />
    </a>
    <li
      class="nav-list-item"
      *ngFor="let item of list"
      (click)="onSubMenu($event)"
    >
      <details> //I tried using ng-open but not worked to
        <summary>
          <img
            src="{{ item.menu.icon }}"
            alt="{{ item.menu.name }} menu icon"
            class="item-icon"
          />
          <span class="item-title" [ngClass]="{ 'show-title': sideNavStatus }">
            <a class="item-title-text"
              >{{ item.menu.name }}
              <img
                src="../../../assets/side-menu-icons/arrow-down-svgrepo-com.svg"
                alt="Arrow down Icon"
                class="item-arrow-icon"
                [ngClass]="{ 'sub-menu-open': subMenuStatus }"
              />
            </a>
          </span>
        </summary>
        <div class="sub-menu-content">
          <ul class="sub-list">
            <li
              class="sub-list-item"
              *ngFor="let item of item.menu.subMenuList"
            >
              <img src="{{ item.icon }}" alt="{{ item.name }} menu icon" />
              <span>
                <a href=""
                  >{{ item.name }}
                  <img
                    [ngClass]="{ 'show-arrow': item.subSubMenuList }"
                    src="../../../assets/side-menu-icons/arrow-down-svgrepo-com.svg"
                    alt="Arrow down Icon"
                  />
                </a>
              </span>
            </li>
          </ul>
        </div>
      </details>
    </li>
  </ul>
</div>

side-nav.ts

export class SideMenuComponent {

  @Input() sideNavStatus: boolean = false;
  subMenuStatus: boolean = false;
  subMenuOpen!: boolean;

  list: MenuList[] = [...];

  changeSideNavButton(): string {
    if (this.sideNavStatus) {
      return '../../../assets/side-menu-icons/menu-collapsed-svgrepo-com.svg'
    }else {
      return '../../../assets/side-menu-icons/menu-expand-svgrepo-com.svg'
    }
  }

  onSubMenu(e: any) {
    console.log(e);
    e.target.children.setAttribute('open'); //this is not worked too
  }
}