[SOLVED] Accordions menu, strange syntax

Issue

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>

Solution

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

Answered By – NeNaD

Answer Checked By – Cary Denson (BugsFixing Admin)