Added a button in the textarea through renderer2 in a directive, but it isn't visible in the browser, though I can see it in console

Question

i am trying to add a button to a textarea dynamically through renderer2, in a directive. But the button is not visible. Below is my directive code-

@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);  

   }

when I console log the nativeElement, the button is visible.snapshot of console.log

Textareas are for text (as the name suggests), not for HTML elements. If you want to "add a button to a textarea", you will have to make your CSS look like it, but your HTML can't do it. — , Jun 07 '18 at 06:40

score 1 · Accepted Answer · answered Jun 07 '18 at 06:41

1

probably wanna add to the native element

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

answered Jun 07 '18 at 06:41

Sachila Ranawaka

39,756
7
56
80

Added a button in the textarea through renderer2 in a directive, but it isn't visible in the browser, though I can see it in console

1 Answers1