Добавлена ​​кнопка в текстовой области через 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);