Angular pipe - get current element reference

Question

I want to access the current element where the pipe is being used in. Is it possible in Angular?

Pipe is used as follows e.g. <input type="text" value="'my-translation-key' | translate" />

Here is an example of the actual pipe

@Pipe({
  name: 'translate',
  pure: false
})
export class TranslatePipe implements PipeTransform {
  transform(key: string, params?: ITranslationSelector): string {
      // 1. Get the value by key
      // 2. Return the value

      // What I want as well:
      // this.el.nativeElement.dataset.translationKey = key;
      // Where el is current element where pipe is used
  }
}

score 4 · Answer 1 · edited Mar 03 '20 at 12:52

4

You can also use a template reference variable. Template:

<input #inputEl type="text" value="'my-translation-key' | translate: inputEl" />

The part of the Pipe ts file:

export class TranslatePipe implements PipeTransform {
    transform(key: string, element?: any): string {
        // Element was marked by #inputEl template variable.
        element.dataset.translationKey = key;
    }
}

edited Mar 03 '20 at 12:52

Chenna

2,383
3
20
36

answered Dec 07 '19 at 14:36

József Cserkó

299
2
9

score 3 · Accepted Answer · answered Nov 28 '17 at 19:13

3

Two possible solutions based on your feasibility:

Create Template reference variable and send it as param to your custom Pipe.

Where custom Pipe is

export class CustomPipe implements PipeTransform {
    transform(key: string, params: any): string {
        //Here param is your input element
        return 'your_value';
    }

But in this approach, you are getting input element in custom pipe as HTML element which may not fullfill your requirement.

Fetch Input Element as ViewChild in your component then pass it to custom pipe

@ViewChild('inputRef') inputElementRef:ElementRef;

In this custom pipe will be :

export class CustomPipe implements PipeTransform {
        transform(key: string, params: any): string {
            //Here param is your input element
            return 'your_value';
        }

By this, you can work easily but this approach is better if you have only one or two elements in a single template as fetching multiple View Child won't be a clean code though it'll work fine.

answered Nov 28 '17 at 19:13

Ankit Kapoor

1,615
12
18

Don't know why I'm not able to add input element tag so in first case your input element will be – Ankit Kapoor Nov 28 '17 at 19:18
Yeah, this is what I already knew and it is not what I wanted but it seems it is not possible to get reference the way I wanted. – Stan Nov 30 '17 at 14:52
How do you want ? – Ankit Kapoor Nov 30 '17 at 14:57
Have a reference of element injected in constructor of the pipe using DI. – Stan Nov 30 '17 at 15:33
Hi @AnkitKapoor, can you please tell me how to send a Template reference variable as param to custom Pipe. – Kumaresan Sd Nov 12 '18 at 08:39

Stefan Rein · Answer 3 · 2020-04-28T07:16:26.313

I would like to share some attempts which did not lead me to the desired solution, but maybe could lead someone else to get it working. Also another idea which was not mentioned, yet.

Hook into the templating pipeline

Another way could be to hook into the template creating pipeline of angular.

Idea: Get the AST and check for the pipe class and inject the reference of the element and put it in as a parameter (like mentioned before from others).

For example like these guys did it: https://github.com/typebytes/ngx-template-streams

Attempts:

With pure: true there is only one instance pipe class created per component.

With pure: false there is one instance pipe class created per each use of the pipe in your components HTML.

You can inject elementRef: ElementRef in the constructor of the pipe, but you will only get the reference to the component in which the pipe is used in (in both cases).

I thought maybe it could work somehow with another directive being injected into the pipe which has the reference to the HTMLElement.

Example:

<my-component>
    <div>{{'foo' | mypipe}}</div>
    <div>{{'foo' | mypipe}}</div>
    <input type="text" [value]="'bar' | mypipe">
    <input type="text" [value]="'bar' | mypipe">
</my-component>

I tried to create a directive to get a reference for usual HTMLElements which looked the following:

@Directive({
    selector: 'input,div,span'
})
export class ElementRefDirective {
    constructor(public readonly elementRef: ElementRef) {}
}

But I could not get it injected into the MyPipe class, nor the other way around (getting the MyPipe injected into the directive).

Angular pipe - get current element reference

3 Answers3

Hook into the templating pipeline

Attempts: