Search code examples
angulardropdownangular-directive

Angular - Possible to apply a directive conditionally?

I need to create two different ul depending on type. If I have the type of first, then I want to apply the directive *dropdownMenu. Otherwise, there will be no directive for dropdown.

Is it possible to apply the directive conditionally so that there will be no duplicated code ?

    <ng-container *ngIf="type === 'first'">
      <ul *dropdownMenu item-directive [firstLevelItems]="items1" [secondLevelItems]="items2" [type]="type">
      </ul>
    </ng-container>

    <ng-container *ngIf="type !== 'first'">
      <ul item-directive [firstLevelItems]="items1" [secondLevelItems]="items2" [type]="type">
      </ul>
    </ng-container>
Solution

  • After Angular 2+, there is no way to apply directive based on conditionally. So need to duplicate code as you mentioned.