CODEWITHSUNDEEP
angulartypescript
Onkar Ghule
Onkar Ghule

Reputation: 23

Passing a parameter in event binding to component

I am trying a angular project where i need to display n buttons and on click of each button it should display the button number.

Is there a way to pass any static value in event binding which can be used in component for decision making.

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

the values can be: 1, 2... n which will be used for decision making in controller class.

Upvotes: 2

Views: 5863

Answers (1)

mikias
mikias

Reputation: 446

The code you have will work. You need to create a function in your component (in you case called click) and handle the $event that is passed in.

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

@Component({
  selector: 'example',
  template: `
  <h1>The button number you entered is: {{buttonNumber}}</h1>
  <button (click)="clicked('want to pass a value here')">Click</button>
  `
})

export class ExampleComponent implements OnInit {
  constructor() { }

  ngOnInit() { }

  clicked(yourText) {
    // yourText is the argument from the template
    console.log(yourText)
  }

}

Upvotes: 1

Related Questions