how can I add multiple dynamic richtexteditor?

[Devanshu G]

Hello Team,

When I add Multiple richtexteditor dynamic so how can I declare viewChild in ts file ? If I remove viewChild (#imgRte)  in html file so it will give an error.

Please Help me.

[Vinitha Jeyakumar]

Hi Devanshu,

We can achieve your requirement by using ngFor condition. For every button click we pushed the id value into an array and then rendered the RichTextEditor component. based on that id value, you can get the instance of each Rich Text Editor.

Code snippet:

<div *ngFor="let id of countArray">

    <ejs-richtexteditor id="{{ id }}">

      <ng-template #valueTemplate>

        <p>

          The Rich Text Editor component is a WYSIWYG ("what you see is what you

          get") editor that provides the best user experience to create and

          update the content. Users can format their content using standard

          toolbar commands.

        </p>

      </ng-template>

    </ejs-richtexteditor>

    <br />

  </div>

</div>

 public BtnClick() {

    this.count++;

    var id = 'default_rte' + this.count;

    this.countArray.push(id);

  }

  public ValueBtnClick() {

    var rteInstance = (document.getElementById('default_rte1') as any)

      .ej2_instances[0];

    alert(rteInstance.value);

  }

Sample: https://stackblitz.com/edit/angular-fujoj6-xpaiyg?file=app.component.html,app.component.ts

Regards,

Vinitha