Im having trouble with inserting dynamically created material input string to web page in angular

Question

Below is the code, where im generating a Textarea material input along with a value and inserting it into a div called child_2. the problem is its loading default HTML Textarea and also without value loaded inside it.

      const box = document.getElementById(cmt_id);

        const child_1 = box.children[0];
        const child_2 = box.children[1];
        let comment_text = child_1.innerHTML;

        let inputText = `
          <mat-form-field appearance="outline" class="w-100">
          <textarea
          matInput 
          matTextareaAutosize 
          [matAutosizeMinRows]="2" 
          [matAutosizeMaxRows]="6"
          class="comment" 
          (keyup.enter)="updateComment($event.target.value, ct.id)"
          [(value)]="${comment_text}"
          ></textarea>
          </mat-form-field>
          `;
          child_2.innerHTML = inputText;

this code works as in the picture.

generated Textarea input. please help!

Answer 1

@ViewChildren("textField") textFields: QueryList;

try to understand this concept in angular...