I have the following javascript and html that allows me to click a button to edit text, how do I make it so that it works with angular2 if there are multiple buttons?
<button>Button Text Could Be Editable</button><br />
<button (click)="modifyText()" data-edit="0">Edit Button Above</button>
<script>
function modifyText() {
this.previousElementSibling.previousElementSibling.contentEditable = !!(+(this.dataset.edit = this.dataset.edit == 0 ? 1 : 0))
}
</script>
In angular2, I have a list of students in my scope that I want to be rendered on a button, but I can "Edit" their name on the button only if I click on the specific button.
// this is part of the component
this.students = ['John', 'Jacob', 'Patty'];
// this is the html in my template for the component
<button *ngFor="name of students" (click) = "modifyText()">{{name}}</button><br />
How do I modify modifyText() function within the component so that in angular2, I can get a reference to the specific button and make it editable just like in my non-angular example for a single button?
Am looking for a response using the latest version of Angular as I know this has changed a couple of times.
You can get a reference to the HTML element that was clicked by using the $event object. Most of the guides tell you to use the target property of the event object but I like to use currentTarget because:
It always refers to the element to which the event handler has been attached, as opposed to event.target which identifies the element on which the event occurred.
This guarantees that I will get the correct reference to the HTML element that I am listening for the click on. In the template pass in the current HTML element as a parameter like so:
<button *ngFor="name of students"
(click)="modifyText($event.currentTarget)">{{name}}</button>
and then recieve it in the component like so:
public modifyText(htmlElement: HTMLElement) {
this.dataset.edit = !this.dataset.edit;
htmlElement.contentEditable = this.dataset.edit;
htmlElement.focus();
}