angular 2 and above: directive name starting with *

Question

This is bootstrap code for the drop-down. Could anyone tell what is *dropdownMenu ?

Source code link

<div class="btn-group" dropdown placement="bottom right">
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    This dropdown's menu is right-aligned <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

We also have following code in bs-dropdown-menu.directive.ts :

@Directive({
  selector: '[bsDropdownMenu],[dropdownMenu]',
  exportAs: 'bs-dropdown-menu'
})

Could anyone one tell the relationship between selector , exportAt and the above *dropdownMenu ?

Why are we defining selector this way(ie string selector contains two arrays) and exporting and using it different way?

Answer 1

According to https://angular.io/guide/structural-directives every directive marked with * is structural directive.

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manupulating elements.

Meaning just like *ngIf , it would add/remove the element from the DOM and not just hide it. So in this case the *dropdownMenu will not create the ul until the dropdown is opened, and will remove it when it's closed.

I hope this answer was clear enough.