pass element reference to a directive

Question

I want to pass an element reference to a directive. I know that the reference of the element on which the directive has been applied can be obtained by

private _elemRef: ElementRef

but I want to pass the reference to other element to the directive. Any help is appreciated.

Here's the demo code. I m using a ripple directive.

<ul #other>
  <li ripple>Hello</li>
</ul>

directive.js

@Directive({
  selector: '[ripple]'
})
export class RippleDirective {
  constructor(private _elemRef: ElementRef) {
  }

  @HostListener('click', ['$event'])
  public onClick(event: MouseEvent) {
    // I wan't to refer the '#other' node here
}
}

Please add more code that demonstrates what you try to accomplish. What is "other element" and "the directive"? — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 8, 2016 at 19:48
It's possible this is possible. But, I'd be worried about the code design effects of this. If you want information from that element, you can write a function that reads it in the current component, and pass that information in a [bracket]="func()" attribute. If you want to change that element, you could watch an event on your subcomponent. For other uses, specialized tags work well. — Katana314
– Katana314, Commented Aug 8, 2016 at 20:00

Günter Zöchbauer · Accepted Answer · 2016-08-09 09:55:57Z

16

You can pass the template variable #other to an @Input():

@Directive({
  selector: '[ripple]'
})
export class RippleDirective {
  @Input() ripple;

  @HostListener('click', ['$event'])
  public onClick(event: MouseEvent) {
    this.ripple...
  }
}

<ul #other>
  <li [ripple]="other">Hello</li>
</ul>

answered Aug 9, 2016 at 9:55

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user11314257 Over a year ago

How to reset this element if it is input #other?

Günter Zöchbauer Over a year ago

What do you mean with "reset"?

Collectives™ on Stack Overflow

pass element reference to a directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related