How to get innerHTML of this dynamic div in my Angular 2 application?

Question

<div *ngFor="let field of page.fields"> 
    <div #ce class="infills richtextbox textarea {{field.groupid}}" contentEditable="true"
        *ngIf="(field.fieldtype=='textarea' && field.isexpandable=='true')"
        id="{{field.id}}" name="{{field.id}}"
        [ngStyle]="{'position':'absolute','top':field.y+'px','left':field.x+'px',
                    'font-size':'12px','font-family':'Courier New','height':field.height+'px',
                    'width':field.width+'px','background':'#EEE'}" 
        [(ngModel)]="field.value" title="{{field.description}}"
        (dblclick)="openFullRTE(field.id)" (focusout)="getHTMLContent()">
    </div>
</div>

In ts part,

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

When I write anything in first div, respective innerHTML is consoled properly. Then if I write something in second div, console gets overridden by data of first div. Please suggest a way to get HTML content of individual fields and to console them separately.

Günter Zöchbauer · Accepted Answer · 2017-04-28T09:46:52.670

1

<div *ngFor="let field of page.fields; let i=index"> 

  <div #ce class="infills ri...

        (focusout)="getHTMLContent(i)"

class MyComponent {
  @ViewChildren('ce') ces:QueryList<ElementRef>;

  constructor(private elRef:ElementRef) {}

  getHtmlContent(i) {
    console.log(this.ces.toArray()[i].nativeElement.innerHTML);
  }
}

edited Apr 28 '17 at 09:46

answered Apr 25 '17 at 09:54

Günter Zöchbauer

623,577
216
2,003
1,567

This works for first div. I am getting innerHTML of first div correctly. But as I am generating may divs based on above code, I am not able to get innerHTML of each div separately. Can you please help me here ? – Arun Kannath Apr 27 '17 at 09:53
You can use `@ViewChildren('ce') ces:QueryList;` to query for a list of elements. See also http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template/35209681#35209681 – Günter Zöchbauer Apr 27 '17 at 09:54
Sorry,I didn't get it correctly. In my scenario, consider a form where I am generating this divs and getting innerHTML values of them based on the JSON file that I am getting. Using this solution, I am getting innerHTML of first div correctly(when I consoled it). But when I enter data to second div which got generated dynamically and console it,I am getting value of first div only. Can you please explain how to solve this ? – Arun Kannath Apr 28 '17 at 05:17
Please add the code to your question that demonstrates that. I can't provide a concrete answer to a general question. – Günter Zöchbauer Apr 28 '17 at 06:43
The HTML is same. In the ts part,on focusout event I am calling function getHTMLContent() which is doing a console like:getHTMLContent(){ console.log(this.ce.nativeElement.innerHTML);}. Now when I write anything in first div, respective innerHTML is consoled properly. Then if I write something in second div, console gets overridden by data of first div. Please suggest a way to get HTML content of individual fields and to console them. – Arun Kannath Apr 28 '17 at 07:00
Please edit the question and add code there. Code in comments is usually unreadable because formatting is lost. – Günter Zöchbauer Apr 28 '17 at 07:01
Done, please see now – Arun Kannath Apr 28 '17 at 07:47
Your code doesn't show how you generate the divs. I guess some `*ngFor`? – Günter Zöchbauer Apr 28 '17 at 07:51
Yes. I have a *ngFor before it to loop and render – Arun Kannath Apr 28 '17 at 07:59
It would be very helpful if you would add this code. Then I could just add the missing pieces. Otherwise I need to come up with some example that doesn't match exactly what you're using and then we are discussing endlessly until we find out what you might want. I don't have the time for that. Provide the code and I'll give you the information where and how you need to tweak it to get what you want. – Günter Zöchbauer Apr 28 '17 at 08:03
Tried it, got the exception:: this.ces.toArray is not a function – Arun Kannath Apr 28 '17 at 09:44
What do you get for `console.log(this.ces)`? – Günter Zöchbauer Apr 28 '17 at 09:47
I am getting an ElementRef object which contains many properties including innerHTML and innerText. – Arun Kannath Apr 28 '17 at 09:53
Sounds like you didn't change `@ViewChild` to `@ViewChildren` (see the code in my answer) – Günter Zöchbauer Apr 28 '17 at 09:54
Really sorry. I missed that. Now the ces(querylist) returns an array of elementrefs. And here also when I enter in one div all other divs are getting updated with the same values – Arun Kannath Apr 28 '17 at 10:11
`this.ces.toArray()` is supposed to return an array of `ElementRef`. Can you please try to reproduce in https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5 – Günter Zöchbauer Apr 28 '17 at 10:25
The problem is in my side only. Whatever you said is correct, but in my case the ngFor loops through other elements like spans before reaching the respective div. I am unable to use another ngFor in the div because I am already using an ngIf in the same. Need to figure out what to do; like wrap it or something(already tried with ng-container and template to wrap; but then divs are not getting rendered. Please help me with this if you can.). However, I am accepting this as correct answer as this addressed my question exactly. Thanks ! – Arun Kannath May 02 '17 at 11:40
Can you please create a plunker (or update above one) it's not clear to me what the problem is. – Günter Zöchbauer May 02 '17 at 17:26
Sorry,I am unable to create a plunker.Please understand that I am getting some data(say, JSON). I am rendering a form(like a proper form where we fill details) with elements like div,span etc based on conditions.In current scenario, *ngFor is used at the top container div which renders all elements. So if I use an index there, I will get index number as 29 to pass it to getHtmlContent() method. So I am trying to use ngFor in my specific div inside container div which I am not able to as it contains an *ngIF condition already.Need help in figuring out to get this index as size of array – Arun Kannath May 03 '17 at 04:51
Or you can tell me how to get innerHTML of the div by passing the div id for the same code – Arun Kannath May 03 '17 at 05:31

score 1 · Answer 2 · answered Sep 29 '20 at 13:57

1

The easiest way:

<div *ngFor="let field of page.fields"> 
    <div #ce ... (focusout)="getHTMLContent(ce)">
    </div>
</div>

getHTMLContent(element) {
    console.log(element.innerHTML);
}

answered Sep 29 '20 at 13:57

Dombi Bence

746
7
23

How to get innerHTML of this dynamic div in my Angular 2 application?

2 Answers2