Back ArrowExplore all kits

Binding same click event to multiple elements using angular js

share link

by shivanisanju03 dot icon Updated: Mar 31, 2023

technology logo
technology logo

Guide Kit Guide Kit  

Binding to events link To bind to an event, you use the Angular event binding syntax. This syntax contains a target event name within parentheses to the left of an equal sign and a quoted template statement to the right. The target event name is clicked in the following example, and the template statement is onSave (). 


The event binding listens for the button's click events and calls the component's onSave () method whenever a click occurs. To determine an event target, Angular checks if the name of the target event matches an event property of a known directive. 


Here is an example of how to bind the same click event to multiple elements using angular js 

Fig: Preview of the output that you will get on running this code from your IDE.

Code

Angular 2 Binding same click event to multiple elements

TypeScriptdotLines of Code : 37dotLicense : Strong Copyleft (CC BY-SA 4.0)

export class App {
  name:string;

  selectedIndex: number;

  constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.selectedIndex = -1;
  }

  iconChange(index: number){
    if(this.selectedIndex == index){
      this.selectedIndex = -1;
    }
    else{
      this.selectedIndex = index;
    }

  }
}

<div>
  <h2>Hello {{name}}</h2>
  <div class="div1" (click)="iconChange(1)" >
    Hi 
      <i class="fa" [ngClass]="{'fa-plus': selectedIndex != 1, 'fa-minus': selectedIndex == 1}" aria-hidden="true" style="float: right"></i>
    </div>
  <div class="div2" (click)="iconChange(2)">
    Hi again!
      <i class="fa" [ngClass]="{'fa-plus': selectedIndex != 2, 'fa-minus': selectedIndex == 2}"  aria-hidden="true" style="float: right"></i>
  </div>
  <div class="div3" (click)="iconChange(3)">
    Bye!
      <i class="fa" [ngClass]="{'fa-plus': selectedIndex != 3, 'fa-minus': selectedIndex == 3}"  aria-hidden="true" style="float: right"></i>
  </div>
</div>

Instructions


Follow the steps carefully to get the output easily.

  1. Install Visual Studio Code on your computer.
  2. Open terminal, install Angular using this command-'npm install -g @angular/cli@latest'.
  3. Create new folder using the command-'ng new folder_name'.
  4. Copy the code snippets and paste it in app.component.html and app.component.ts
  5. Save the files and open the terminal, use this command-'ng serve' to generate the output in localhost.


Note: If it prompts for version update in app.component.ts fix it using quick fix option


I found this code snippet by searching for ' Binding same click event to multiple elements in angular ' in kandi. You can try any such use case!


Environment Tested


I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created and tested in Visual Studio Code 1.74.1.
  2. The solution is test in Angular CLI - 15.2.2.


Using this solution, we are able to implement event bubbling in Angular with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to implement event bubbling in Angular.

Support


  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page.


Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.