TS Directive file
import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core';
@Directive({ selector: '[appDropdown]' })
export class DropdownDirective
{
@HostBinding('class.open') isOpen = false;
@HostListener('document:click', ['$event']) toggleOpen(event: Event)
{
this.isOpen = this.elRef.nativeElement.contains(event.target) ? !this.isOpen : false;
}
constructor(private elRef: ElementRef)
{
}
}
HTML
<div class="row">
<div class="col-xs-12">
<div class="btn-group" appDropdown>
<button type="button" class="btn btn-primary dropdown-toggle">
Manage Recipe <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a (click)="onAddToShoppingList()" style="cursor: pointer;">To Shopping List</a></li>
<li><a style="cursor: pointer;" (click)="onEditRecipe()">Edit Recipe</a></li>
<li><a style="cursor: pointer;" (click)="onDeleteRecipe()">Delete Recipe</a></li>
</ul>
</div>
</div>
</div>
I try to put a fade in animation. When u click on the dropdown it would have make all in the dropdown appear one after each other i.e a fade in affect. I am starting to doubt is it even possible