1

Estoy usando Angular 5.2.

Intento hacer lo siguiente:

Tengo varios elementos HTML cada uno con un evento de tipo clic que invoca a un mismo método del componente. Este método recibe un string que usa internamente. Es decir que en el template HTML tendría algo así:

<p class="link" id="id_1" (click)="xxx('foo')">click 1</p>
<p class="link" id="id_2" (click)="xxx('baz')">click 2</p>

y en la clase del componente:

public xxx(element: string): void {
    console.log('value: ' + element);
}

Lo que quiero es poder pasar, automáticamente, el valor de un atributo del elemento HTML, en este ejemplo un párrafo, que puede ser por ejemplo su ID.

He probado con:

<p class="link" id="id_1" (click)="xxx(this.id)">click 1</p>
<p class="link" id="id_2" (click)="xxx([attr.id])">click 2</p>

2 respuestas 2

1

Podrías directamente poner el valor que quieres:

<p class="link" id="id_1" (click)="xxx('foo')">click 1</p>
<p class="link" id="id_2" (click)="xxx('baz')">click 2</p>

Lo que, asumiendo que esos elementos los creas con un bucle, podrías escribirlo así:

<p *ngFor="let elem of elems; let i=index" class="link" (click)="xxx(elem.attr)">click {{i}}</p>

Esto es suponiendo que tengas en el componente algo como

this.elems = [{attr : 'foo'}, {attr : 'baz'}];

Con lo que realmente el campo id no te haría falta (llevo trabajando con Angular más de un año y nunca he usado el id para buscar elementos)

Si aun así quieres acceder al elemento en sí, puedes hacer lo siguiente:

<p class="link" id="id_1" (click)="xxx($event.target.id)">click 1</p>

Y en el componente usa:

xxx (id) {
   console.log('value: ' + id);
}
4
  • Lo tengo así ahora mismo (paso de los valores directamente), en espera de respuesta. Los ids: id_1 e id_2 los he puesto a título ilustrativo, bien podría ser foo y baz, tampoco estoy generando los elementos dinámicamente. Gracias, un saludo.
    – Orici
    Commented el 25 oct. 2018 a las 15:06
  • En espera de respuesta ¿A qué te refieres? Commented el 25 oct. 2018 a las 15:08
  • De cómo obtener automáticamente el valor de un atributo del elemento, como por ejemplo su id, para no tener que ponerlo yo mismo.
    – Orici
    Commented el 25 oct. 2018 a las 15:24
  • Te he actualizado poniendo lo que pides, aunque realmente no le encuentro mucha utilidad. El uso del DOM cuando trabajas con Angular no es muy necesario Commented el 25 oct. 2018 a las 16:12
0

Prueba pasar el atributo event dentro de la función: (click)="xxx(event)" Después crea la función en la clase del componente que recibe ese evento

function xxx(e){
    console.log(e.target)
}

Dentro de target tienes todos los eventos que recibe

1
  • No se puede crear una función en la clase de Angular con la palabra function, obviando esta palabra y si creo el método como indicas, el resultado es: ERROR TypeError: Cannot read property 'target' of undefined
    – Orici
    Commented el 25 oct. 2018 a las 22:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.