0

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

0 Answers0