Добавлена ​​кнопка в текстовой области через renderer2 в директиве, но она не видна в браузере, хотя я вижу ее в консоли

Question

Я пытаюсь добавить кнопку в текстовое поле динамически через renderer2, в директиве.Но кнопка не видна.Ниже приведен код моей директивы -

@Directive({
  selector: '[appMain]'
})
export class MainDirective {
  @Input() initial: string; inText: string;
  constructor(private el : ElementRef, private rend: Renderer2) {
    let r= this.rend.createElement('button');
    let t= this.rend.createText('Click Me!');
    this.rend.appendChild(r, t);
    this.rend.appendChild(this.el.nativeElement,r);
    this.rend.setStyle(r, 'display', 'block');
    console.log(this.el.nativeElement);  

   }

, когда я консольный журнал nativeElement, кнопка видна. снимок console.log

Answer 1

вероятно хочу добавить к нативному элементу

el.nativeElement.insertAdjacentHTML('beforeend', r);