How do you access the element HTML from within an Angular attribute directive

Question

The Angular docs provide an example for creating an attribute directive that changes the background color of an element   https   angular io docs ts latest guide attribute-directives html   lt p myHighlight gt Highlight me  lt  p gt    import   Directive  ElementRef   from   angular core     Directive   selector    myHighlight       export class HighlightDirective       constructor el  ElementRef            el nativeElement style backgroundColor    yellow             Can I also use el nativeElement to get the content of the element  e g  Highlight me    modify this and update the element

User · Answer

Base on  Mark answer  I add the constructor to directive and it work with me   I share a sample to whom concern   constructor private el  ElementRef  private renderer  Renderer        TS file   Directive   selector    accordion      export class AccordionDirective      constructor private el  ElementRef  private renderer  Renderer            HostListener  click      event    onClick  event        console info  event        this el nativeElement classList toggle  is-open         var content   this el nativeElement nextElementSibling      if  content style maxHeight             accordion is currently open  so close it       content style maxHeight   null        else            accordion is currently closed  so open it       content style maxHeight   content scrollHeight    px                  HTML   lt button accordion class  accordion  gt Accordian  1 lt  button gt       lt div class  accordion-content  gt         lt p gt          Lorem ipsum dolor sit amet  consectetur adipisicing elit  Quas deleniti molestias necessitatibus quaerat quos incidunt  Quas officiis repellat dolore omnis nihil quo          ratione cupiditate  Sed  deleniti  recusandae  Animi  sapiente  nostrum         lt  p gt            lt  div gt    Demo https   stackblitz com edit angular-directive-accordion file src app app component ts

User · Answer

I suggest using Render  as the ElementRef API doc suggests          take a look at Renderer which provides API that can safely be used even when direct access to native elements is not supported    Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker or Universal    Always use the Renderer for it will make you code  or library you right  be able to work when using Universal or WebWorkers     import   Directive  ElementRef  HostListener  Input  Renderer   from   angular core    export class HighlightDirective       constructor el  ElementRef  renderer  Renderer            renderer setElementProperty el nativeElement   innerHTML    some new value              It doesn t look like Render has a getElementProperty   method though  so I guess we still need to use NativeElement for that part  Or  better  pass the content in as an input property to the directive

User · Answer

This is because the content of   lt p myHighlight gt Highlight me  lt  p gt    has not been rendered when the constructor of the HighlightDirective is called so there is no content yet   If you implement the AfterContentInit hook you will get the element and its content   import   Directive  ElementRef  AfterContentInit   from   angular core     Directive   selector    myHighlight       export class HighlightDirective        constructor private el  ElementRef              el nativeElement style backgroundColor    yellow              ngAfterContentInit              you can get to the element content here            this el nativeElement

User · Answer

So actually  my comment that you should do a console log el nativeElement  should have pointed you in the right direction  but I didn t expect the output to be just a string representing the DOM Element    What you have to do to inspect it in the way it helps you with your problem  is to do a console log el  in your example  then you ll have access to the nativeElement object and will see a property called innerHTML    Which will lead to the answer to your original question   let myCurrentContent string   el nativeElement innerHTML     get the content of your element el nativeElement innerHTML    my new content      set content of your element     Update for better approach   Since it s the accepted answer and web workers are getting more important day to day  and it s considered best practice anyway  I want to add this suggestion by Mark Rajcok here   The best way to manipulate DOM Elements programmatically is using the Renderer   constructor private  elemRef  ElementRef  private  renderer  Renderer         this  renderer setElementProperty this  elemRef nativeElement   innerHTML    my new content        Edit  Since Renderer is deprecated now  use Renderer2 instead with setProperty    Update   This question with its answer explained the console log behavior    Which means that console dir el nativeElement  would be the more direct way of accessing the DOM Element as an  inspectable  Object in your console for this situation     Hope this helped

[angular] How do you access the element HTML from within an Angular attribute directive?

Examples related to angular