How to append after last child element with Angular Renderer2?

Question

I'm trying to append a button after an input field with an Angular7 directive. The problem is that the Renderer2 method appendChild is placing the button before the input field.

Button before input field image

import { Directive, ElementRef, Input , HostListener, Renderer2, OnInit, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appInlineEdit2]'
})
export class InlineEdit2Directive {

  @Input() value: any;
  private spanElement: Node;
  private spanText: Node;
  // private children: Node[];

  constructor(private el: ElementRef,
    public renderer: Renderer2) {
      this.spanElement = this.renderer.createElement('span');
      // this.spanText = this.renderer.createText('dummy_span');
      // this.renderer.appendChild(this.spanElement, this.spanText);
      this.renderer.setAttribute(this.spanElement, 'id', 'anchor');
      this.renderer.appendChild(this.el.nativeElement, this.spanElement);
      // this.renderer.insertBefore(this.el.nativeElement, this.spanElement, null);
      this.renderer.listen(this.spanElement, 'click', this.onClick.bind(this));

      const button = this.renderer.createElement('button');
      this.renderer.setAttribute(button, 'type', 'button');
      this.renderer.addClass(button, 'btn');
      this.renderer.addClass(button, 'btn-primary');
      const buttonText = this.renderer.createText('OK');
      this.renderer.appendChild(button, buttonText);
      this.renderer.listen(button, 'click', this.onClickOK.bind(this));
      this.renderer.appendChild(this.el.nativeElement, button);
      // this.renderer.insertBefore(this.el.nativeElement, button, null);
    }

    ngOnInit() {
      console.log(this.el.nativeElement.childNodes);
      // this.showMode();
    }
}

And in the template:

<div class="input-group col-6" appInlineEdit2 [value]="model">
    <input type="text" class="form-control" placeholder="Recipient's username"
        [(ngModel)]="model" aria-label="Recipient's username" aria-describedby="basic-addon2">
</div>

I expect the button to be after the input field in the DOM.

Vassal

Answer 1

The problem with your code is that you are executing Renderer2 related logic in constructor. Constructor is called during component creation and at that moment component DOM has not been initialized yet, which means ElementRef and nativeElement exists somewhere but not in the DOM yet. That's why you are experiencing such ambiguous behavior.

See this post for further details.

So, placing Renderer2 related logic within ngOnInit solves your problem.

Here is a working demo https://stackblitz.com/edit/angular-ywn1ky

Catanddog