how to call a directive onclick of a button from a component in angular2

Question

On click of a image i am opening image popup gallery, on popup i have to apply image zoom. for zoom I created directive which is calling onload but not when popup opens.

How to call directive when popup comes?

First i am calling a component from component i am calling directive based on some conditions like below,

<div *ngIf="hirusImage; else normalImage " >
    <div >
    <div id="seadragon-viewer" nwImageZoom [primaryPicture]="primaryPicture" style="float:left;width:500px;height: 333px;color: #333;"></div>
    </div>
</div>

nwImageZoom is my directive,

any solutions will be appreciated thank you

Answer 1

you can use the concept of @HostListener and @HostBinding for calling the directive on the click,

this code will help you.

  import { Directive, HostListener, HostBinding } from '@angular/core' @Directive({ selector:'[nwImageZoom]' }) export class NwImageZoomDirective{ constructor(){} // here you can add the css class you want add for zooming for that we use // isZoom is the variable which decide whether the class will be add or not.] @HostBinding('class.zoom') isZoom=false; enter code here // here you can attached the 'toggleZoom' function to @HostListener and the // inside @HostListener you can pass the Event like-'click' @HostListener('click') toggleZoom(){ this.isZoom=!this.isZoom; } 

enter code here