¿Cómo puedo vincular la función onclick / (click) dentro del literal de la plantilla?
Por ejemplo:
for (let i = 0; i < locations.length; i++) { let customHtml = ` <div class="flex"> <ion-button size="small" (click)="${abc(locations[i])}">Message</ion-button> <ion-button size="small" onclick="abc('${locations[i]}')">Request</ion-button> </div> `; } abc(l){ console.log(l); }en el primer botón, se registra en el momento de la carga. No al hacer clic.
en el segundo botón muestra el error: Error de Uncaught ReferenceError: abc is not defined .
Intenté en ambos sentidos Vanilla Javascript y en Angular para vincular funciones en eventos de clic.
Lo gestioné para crear elementos dinámicos con la ayuda del comentario de @Reyno. usando Renderer2 de angular.
for (let i = 0; i < locations.length; i++) { let customHtml = this.addCustomHtml(locations[i]); // can use it here it is working now. } addCustomHtml(l) { const p1 = this.renderer.createElement('p'); const p1Text = this.renderer.createText(`ID: ${l[0]}`); this.renderer.appendChild(p1, p1Text); const p2 = this.renderer.createElement('p'); const p2Text = this.renderer.createText(`Lat: ${l[1]} \n Lng: ${l[2]}`); this.renderer.appendChild(p2, p2Text); const button = this.renderer.createElement('ion-button'); const buttonText = this.renderer.createText('Send Request'); button.size = 'small'; button.fill = 'outline'; button.onclick = function () { console.log(l); }; this.renderer.appendChild(button, buttonText); const container = this.renderer.createElement('div'); this.renderer.appendChild(container, p1); this.renderer.appendChild(container, p2); this.renderer.appendChild(container, button); return container; }