Sending data to a component through event binding

Question

Sending data to a component through event binding

I am currently working on an angular project where I am looking to display a series of buttons. When each button is clicked, I want it to display the corresponding button number.

Is there a way to pass a specific value in the event binding that can be used within the component for making decisions?

<button (click)="clicked('I want to pass a value here')">Click </button>
<h1>The button number you entered is: {{buttonNumber}}</h1>

The values could range from 1 to n and will be utilized for decision-making in the controller class.

angular typescript

Answer 1

Answer №1

It is completely valid. What you need to do is create a function inside your component (named click in this case) and handle the $event that gets passed in.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'sample',
  template: `
  <h1>The number you input is: {{number}}</h1>
  <button (click)="pressed('passing a value here')">Click</button>
  `
})

export class SampleComponent implements OnInit {
  constructor() { }

  ngOnInit() { }

  pressed(text) {
    // text is the parameter from the template
    console.log(text)
  }

}

Answer 2

It is completely valid. What you need to do is create a function inside your component (named click in this case) and handle the $event that gets passed in.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'sample',
  template: `
  <h1>The number you input is: {{number}}</h1>
  <button (click)="pressed('passing a value here')">Click</button>
  `
})

export class SampleComponent implements OnInit {
  constructor() { }

  ngOnInit() { }

  pressed(text) {
    // text is the parameter from the template
    console.log(text)
  }

}

Sending data to a component through event binding

Answer №1

Similar questions

Build an Angular wrapper component for the phone textbox functionality

Not all Angular Material2 styles are being fully applied

React's componentDidUpdate being triggered before prop change occurs

How can one trigger a service method in nestjs through a command?

Encountering issues with nested routes in Angular 2 causing errors

Replace the content of the HTML tag in the index.html file with a different HTML file located at a specific URL in an Angular application

Angular - Display shows previous and current data values

Is it possible to modify the color of a mat-progress-bar based on its status?

In Angular, the data is displayed in the console but is not visible in the application

Navigating to the top of the page with Angular 5 tab scrolling

What is the best way to retrieve the dimensions of an Angular 5 Component prior to displaying it on the screen?

Difficulty in connecting React to Node.js with the use of axios

Having trouble getting Laravel and Angular to filter data by categories?

How to extract a date from Mat-Datepicker without using moment library

Navigating through Objects in Angular 9

Angular 2: Enhancing communication between directives and host components

Encountering challenges with periods in URL when utilizing a spring boot application alongside Angular in a live environment

Change the ddmmyy date string to dd/mm/yyyy format using TypeScript

Ways to inform TypeScript of the potential return type when a generic's parameter can be either a string or a number

Customize your Loopback 4 OpenAPI with NSWAG by making filters optional and specifying data types