Accordions menu, strange syntax-CodePudding

I retrieved a code from Stackblitz

I don't understand this line:

[style.height.px]="menu.active?submenu.scrollHeight: 0">

Is there a way to write this with another syntax?

Here is the code

    <ul  #submenu 
     [style.height.px]="menu.active ? submenu.scrollHeight : 0">
       <li *ngFor="let submenu of menu.submenu">
         <a [href]="submenu.url">{{ submenu.name }}</a>
        </li>
    </ul>

CodePudding user response：

You can do it with ngStyle attribute directive:

[ngStyle]="{ 'height.px': menu.active ? submenu.scrollHeight : 0 }"

So the final code will look like:

<ul  #submenu [ngStyle]="{ 'height.px': menu.active ? submenu.scrollHeight : 0 }">
  <li *ngFor="let submenu of menu.submenu">
    <a [href]="submenu.url">{{ submenu.name }}</a>
  </li>
</ul>

Working example