Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

1.1K
Visualizações
how can i pass my div id in angular once i click the div

new to angular

I have 3 div's i need to give them each an ID once i click i need to pass the divs id as well:

<div (click)="ToBank(e)"></div>
 <div (click)="ToBank(e)"></div>
 <div (click)="ToBank(e)"></div>


ToBank(e){

 ///i need to get which is clicked?
    }

i dont know how can i give name to each div that i can get it in my function,i know in javascript we have getElementByID but here whats the best way?

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

You can get the element you've clicked on using event.target

In your case.

ToBank(e){
    let target = e.target;
    }

There are more details about events here: https://developer.mozilla.org/en-US/docs/Web/API/Event/target

over 4 years ago · Santiago Trujillo Relatório

0

In angular you don't need to use ids, instead you can use Template Variables.

These are created has follows:

<div #divOne (click)="ToBank(e)"></div>
<div #divTwo (click)="ToBank(e)"></div>
<div #divThree (click)="ToBank(e)"></div>

Then you can pass the variable directly:

<div #divOne (click)="ToBank(e, divOne)"></div>
<div #divTwo (click)="ToBank(e, divTwo)"></div>
<div #divThree (click)="ToBank(e, divThree)"></div>

If you want to access them in your component directly, you can use the ViewChild decorator to do so. Keep in mind that they will only be available in the AfterViewInit lifecycle hook.

over 4 years ago · Santiago Trujillo Relatório

0

You can pass the Event object to your method using the $event keyword

<div (click)="ToBank($event)"></div>

and then use it to set the div's id.

ToBank(event) {
  event.target.id = 'nyDiv';
}

As far as I understand, you also want to pass the ids to the ToBank() method. You can do it by adding a second parameter

ToBank(event, id) {
  event.target.id = id;
}

and then providing the ids in the second arguments.

<div (click)="ToBank($event, 'id1')"></div>
<div (click)="ToBank($event, 'id2')"></div>
<div (click)="ToBank($event, 'id3')"></div>

Using template variables, you can pass the DOM element without having to pass the entire Event object.

<div #divOne (click)="ToBank(divOne, 'id1')"></div>
<div #divTwo (click)="ToBank(divTwo, 'id2')"></div>
<div #divThree (click)="ToBank(divThree, 'id3')"></div>
ToBank(element, id) {
  element.id = id;
}

Another approach is to store the current ids in a property

<div id="{{ ids[0] }}" (click)="ToBank(0, 'id1')"></div>
<div id="{{ ids[1] }}" (click)="ToBank(1, 'id2')"></div>
<div id="{{ ids[2] }}" (click)="ToBank(2, 'id3')"></div>
ids = ['', '', '']; // no ids at first

ToBank(arrayIndex, id) {
  this.ids[arrayIndex] = id;
}

or make them depend on a certain property using the ternary operator.

<div id="{{ conditions[0] ? 'id1' : '' }}" (click)="ToBank(0)"></div>
<div id="{{ conditions[1] ? 'id2' : '' }}" (click)="ToBank(1)"></div>
<div id="{{ conditions[2] ? 'id3' : '' }}" (click)="ToBank(2)"></div>
conditions = [false, false, false]; // no ids at first

ToBank(arrayIndex) {
  this.conditions[arrayIndex] = true;
}

Note that you normally do not need to use getElementById() and alike in Angular. Setting the id only really makes sense if you have some styles for it, but in that case, a class is probably better.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda