details HTML element in Angular appears to be working backwards, with 'open' absent, details.open gives true

Question

I am having a terrible time trying to capture the state of a <details> element in Angular 16.

The best I have got so far after using the good ol chat AI and lots of Stackoverflow was do do this in the html

<details #refEl #1 (click)="toggleDetails(refEl)">

(that gave me a reference to the element according to an SO post) and this in my ts component file:

  toggleDetails(el: HTMLDetailsElement)
  {
    console.log(el);
    console.log(el.open);
    if (el.open)
    {
      console.log("Toggle is open");
    }
    else
    {
      console.log("Toggle is closed");
    }
  }

When I click on the details element to open it I get the following output:

<details _ngcontent-ng-c1633918015="" open=""> (plus other junk)
false
toggle is closed

Needless to say, when I click on it again to close it, I get

<details _ngcontent-ng-c1633918015=""> (plus other junk)
true
toggle is open

My understanding is that when the open element is present it is open, but my log is showing the reverse. What am I messing up?

By the way I have tried all the perturbations with @ViewChild and @ViewChildren with no success at all. The above is the closest I have gotten to success!