How can i change div contenteditable = "false" to "true"?

Question

I am playing around with angular2. I want to change the value of a div- Need to change all contenteditable="false" to contenteditable="true" which are there on my HTML page.

Please note sometimes the contenteditable="false" will be added to a DIV tag and sometimes to P, h1 tag or some other.

The html looks as following:

<button (click)="selectDiv()">select div</button>
<section>
      <div class="content">
        <h1 contenteditable="false" >Resize your browser and see how they adapt.</h1>
        <h1 contenteditable="false" >text2.</h1>
      </div>
      <div class="content" contenteditable="false">
        <p>Content 2.</p>
        <h1>text2.</h1>
      </div>
</section>

Please guide me what should i write in explore.ts so that when i click the button, selectDiv() is called and the function is executed and all the contenteditable="false" becomes "true"

Please note there can be any number of contenteditable="false" in my code.

selectDiv(){
//what should i write here
}

Answer 1

For an Angular way of doing it:

HTML

<button (click)="selectDiv()">select div</button>
<section>
  <div class="content">
    <h1 [contentEditable]="contentEditable">Resize your browser and see how they adapt.</h1>
    <h1 [contentEditable]="contentEditable">text2.</h1>
  </div>

  <div class="content" [contentEditable]="contentEditable">
    <p>Content 2.</p>
    <h1>text2.</h1>
  </div>
</section>

TypeScript Controller

...
private contentEditable: boolean = false;
...
selectDiv(): void {
    this.contentEditable = true;
}
...