Reputation: 333
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
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
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