title: Angular 6 - click to make a div editable
body: <p>Using Angular 6, I have the html below and would like to click the edit text to make the div containing Detail$.Title editable.</p>
  
  <p>Im trying to do it as per <a href="https://stackoverflow.com/questions/48375522/how-to-make-a-column-editable-on-click-angular-4">this SO post</a> </p>
  
  <pre><code> &lt;div class="col-sm-6"&gt;
      &lt;div class="card text-left" &gt;
        &lt;div class="card-header text-secondary"&gt;Title &lt;small class="pull-right text-danger" (click)="setTitleEdit()"&gt;Edit Text&lt;/small&gt;&lt;/div&gt;
        &lt;div class="card-body"&gt;
            &lt;span *ngIf="!cd.canEditCode"&gt;{{Detail$.Title}}&gt;&lt;/span&gt;
            &lt;input *ngIf="cd.canEditCode" type="text" class="form-control"  /&gt;
            &lt;p class="card-text text-secondary"&gt;{{ Detail$.Title}}&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>intellisense doesn't like the forEach or canEditCode below, I know Im missing something, just not sure what, Im unsure where the canEditCode is coming from in the linked post. In my ts file Detail$ is an object containing the data returned from a call</p>
  
  <pre><code>getEventDetail(): void {
      this.data.getDetail(this.id)
        .subscribe(data =&gt; this.Detail$ = data);
    }
  setTitleEdit(){
      this.Detail$.forEach(t =&gt; t.canEditCode = false)
      this.Detail$.canEditCode=true
    }
  </code></pre>