Angular Pipe Template Context

Question

Is it possible to get the exact template location/context/wrapping html element where a pipe is used within a template (without having to pass the pipe any extra arguments)?

I tried injecting ElementRef into the pipe constructor but this returns the entire component element, not the exact DOM location.

Template Example:

...
<div>
    {{ 'blah' | myPipe}}
</div>
...

I'd like to get access to the pseudo element exactly where the pipe is evaluated or the wrapping div.

Current Angular version 8

Answer 1

In Angular 9 Ivy the ElementRef injected in a Pipe points to the place where that Pipe is actually used.

test.pipe.ts

@Pipe({
  name: 'test',
})
export class TestPipe implements PipeTransform {
  constructor(private el: ElementRef) {
    console.info("-->", this.el);
  }
...

html

<div class="bob">
  {{ 'mystring' | test }}
</div>

Ng-run Example

Answer 2

In general, Pipe is like function to facilitate manipulating input data before binding to target property. It is not intended for manipulating DOM. If you want to manipulate DOM, then do it in Component or define Directive for it.