Braj Ankit
Braj Ankit

Reputation: 333

how to delete currently clicked html div tag angular 4

below is my div tag

removeObject(event) {
    console.log(event);
    console.log(event.target);
    event.target.hidden = true;
    //event.target.classList.add('class3');
  }
<div class="col" (click)="removeObject($event)">Rate Limit</div>

which i want to replace with a text box on click

Upvotes: 0

Views: 2031

Answers (2)

Padmapriya Vishnuvardhan
Padmapriya Vishnuvardhan

Reputation: 2166

Instead of removing the div and showing the textbox, you can use the "contentEditable" property to toggle between editable and non-editable div.

There is no need to maintain one more textbox here.

removeObject(event) {
    console.log(event);
    console.log(event.target);
    event.target.contentEditable= !event.target.contentEditable;
    //event.target.classList.add('class3');
  }

Upvotes: 1

Fussel
Fussel

Reputation: 1865

Use *ngIf for that like this. You need a variable in your component called hidden for example.

<div class="col" *ngIf="!hidden" (click)="removeObject($event)">Rate Limit</div>
<input name='limit' *ngIf="hidden">

And your ts method

removeObject(event) {
    console.log(event);
    console.log(event.target);
    this.hidden = !this.hidden;
}

Something like this. If you save the value of your input or something you can set hidden to false again and the div will show or what ever you require.

Upvotes: 1

Related Questions