Need access to Angular 5 directive text

Question

I'm trying to create a custom directive to replace the inner text of my custom directive. I can't seem to access the inner text content to apply some logic.

Here's the code:

import { Directive, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';

@Directive({
  selector: 'text-transformer'
})
export class TextTransformerDirective {
  constructor(
    private elem: ElementRef) {
      // need access to inner text before setting new text
      // elem.nativeElement.outerHTML, innerHTML, outerText, innerText are all empty at this point
      elem.nativeElement.outerHTML = '<span>My new Text</span>';
  }
}

Usage:

<text-transformer>Some text</text-transformer>

I would like to inspect the text inside the tag, in this case, "Some text". I can't seem to access it inside the directive.

Should I use component instead?

Columnist

Why not just change it to component and test it out? – Lights

Is there a performance difference? – Columnist

No, but you're trying to use this directive like a component anyways. – Lights

Probably, I'm migrating from AngularJs (pre-component) to Angular, so component is a newer concept in the current app. – Columnist

Let me know if my answer helped – Lights

To access element's text it's always best to use a Pipe instead of a directive, refer this – Sadirah

I agree wit @Sadirah But that is if you want to watch for changes on whatever your transforming value is. Which would be a heavier load, although not a huge deal regardless. – Lights

To manipulate html you'll want a directive not a pipe. – Ferrell

Answer 1

You're attempting to use a directive like most would use a component.

However, to transform text, it is a directive you want. Just change your selector.

Check out this plunk:

https://plnkr.co/edit/C3SR92TVN1x5bgSazWNW?p=preview

import {Directive, ElementRef, OnInit} from '@angular/core'

@Directive({
  selector: '[text-transformer]'
})
export class TextTransformerDirective implements ngOnInit {

    constructor(
    private elem: ElementRef) {
      // need access to inner text before setting new text
      // elem.nativeElement.outerHTML, innerHTML, outerText, innerText are all empty at this point

    }

  ngOnInit() {
    console.log(this.elem.nativeElement.innerText);
    this.elem.nativeElement.innerText += ' !!My new Text!!';
    console.log(this.elem.nativeElement.innerText) 
  }

}

Then use that directive from any other component like so:

<h1 text-transformer>This text will be changed</h1>

And for reference: https://angular.io/guide/attribute-directives

Lights

I ran your plunker and I still don't have access to the original text. Try changing your child component to: elem.nativeElement.outerHTML += ':My new Text'; and you'll see what I mean. – Columnist

Oh my bad. Just change it to innerText. There are a bunch of ways to accomplish this. Console log the elem and play with all the properties you want. – Lights

OP can change innerText, he can't get current text – Ridings

That += adds it to the current text, therefore, you have the current text..? – Lights

Moved to ngOnInit, so the element can be put into the DOM before we start updating it in the controller constructor. Then you have access to innerText. – Lights

Yeah? that and put the logic in ngOnInit. You could just answer the question yourself ya know? – Lights

Thank you very much @Everett, the ngOnInit was the answer. – Columnist

Great! This just answers the question instead of advising a component or whatever. As I came here to find an answer to the question as I need a directive. Awesome, thanks. – Nostoc