CODEWITHSUNDEEP
angulartypescriptangular-directive
Dawit
Dawit

Reputation: 642

Passing parameter to angular directive in typescript

I have the following directive. I am trying to pass the class name that needs to be toggled when the link/button is clicked. I keep getting undefined in debug console. HostListener takes array of args - i guess i am not sure how to pass them and cant seem to find example of it.

   @Directive({
  selector: '[appSidebarToggler]'
})
export class SidebarToggleDirective {

  constructor(public elementRef: ElementRef) {
  }

  @HostListener('click', ['$event', '$tobeToggledClassName'])

  toggleOpen($event: any, $tobeToggledClassName: any) {
    $event.preventDefault();
    console.log("class to be toggled is - >" + $tobeToggledClassName);
    console.log("ref - >" + this.elementRef);
    document.querySelector(tobeToggledClassName).classList.toggle('sidebar-hidden');

  }
}

and i am using it like this in my component :

<a class="" href="#" sidebarToggler tobeToggledClassName="sideMenu">&#9776;</a>

thanks.

Upvotes: 2

Views: 7894

Answers (2)

yurzui
yurzui

Reputation: 214047

You can pass it like:

@HostListener('click', ['$event', '$event.target.getAttribute("tobeToggledClassName")'])

Example 1

or use injected ElementRef

this.elementRef.nativeElement.getAttribute("tobeToggledClassName")

Example 2

or inject @Attribute in contstructor of your directive:

constructor(...@Attribute('tobeToggledClassName') private tobeToggledClassName: string) {}

Example 3

Upvotes: 2

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You could pass class name inside Input binding of directive. You can easily retrieve a value of binding at any instance.

@Directive({
  selector: '[appSidebarToggler]'
})
export class SidebarToggleDirective {
  @Input() tobeToggledClassName: string;
  constructor(public elementRef: ElementRef) {
  }

  @HostListener('click', ['$event'])

  toggleOpen($event: any) {
    $event.preventDefault();
    console.log("class to be toggled is - >" + this.tobeToggledClassName);
    console.log("ref - >" + this.elementRef);
    document.querySelector(this.tobeToggledClassName).classList.toggle('sidebar-hidden');

  }
}

Html

<a class="" href="#" sidebarToggler tobeToggledClassName="sideMenu">&#9776;</a>
OR
<a class="" href="#" sidebarToggler [tobeToggledClassName]="'sideMenu'">&#9776;</a>

Upvotes: 4

Related Questions