Angular 6 - click to make a div editable

user_299138 0
Viewed 12122

Using Angular 6, I have the html below and would like to click the edit text to make the div containing Detail$.Title editable.

Im trying to do it as per this SO post 

 <div class="col-sm-6">
    <div class="card text-left" >
      <div class="card-header text-secondary">Title <small class="pull-right text-danger" (click)="setTitleEdit()">Edit Text</small></div>
      <div class="card-body">
          <span *ngIf="!cd.canEditCode">{{Detail$.Title}}></span>
          <input *ngIf="cd.canEditCode" type="text" class="form-control"  />
          <p class="card-text text-secondary">{{ Detail$.Title}}</p>
      </div>
  </div>

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

getEventDetail(): void {
    this.data.getDetail(this.id)
      .subscribe(data => this.Detail$ = data);
  }
setTitleEdit(){
    this.Detail$.forEach(t => t.canEditCode = false)
    this.Detail$.canEditCode=true
  }
angular typescript html
2 Answers

try like this 

<div class="col-sm-6" *ngFor="let item of detailItems">
    <div class="card text-left">
        <div class="card-header text-secondary">{{item.title}}
            <small class="pull-right text-success" (click)="item.canEditCode = true">Edit</small>
            <small class="pull-right text-danger" (click)="item.canEditCode = false">Close</small>
        </div>
        <div class="card-body">
            <span>{{item.name}}</span>
            <input *ngIf="item.canEditCode" [(ngModel)]="item.name" type="text" class="form-control" />
        </div>
    </div>

[(ngModel)]="item.name" make two way binding to item property (name)

stackblitz demo

user_39806210

I think it's easier to use native HTML input for editing and viewing with ngModel and style options. Simply like this:

<input type="text" [(ngModel)]="title" class="editable">

And for CSS class:

.editable{
   border:none;
   outline:none;
   background:transparent;
}

That's should work.

user_61578480
Related