'Accordions menu, strange syntax [closed]

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 class="submenu" #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>
javascripthtmlcssangulartypescript


Solution 1:[1]

You can do it with ngStyle attribute directive:

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

So the final code will look like:

<ul class="submenu" #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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 NeNaD

Related Questions