Capturing Click Event to Pass Into Function in Angular App

Question

I have set up some filters a user can click on in order to filter a list display in my Angular app. The relevant code in my view looks like this:

<md-checkbox *ngFor="let option of categoryFilters.options" [(ngModel)]="option.value" (click)="filterByCategory($event)">
     {{option.label}}
</md-checkbox>

You'll notice that I have a "filterByCategory()" function above. What I want to do with that is filter the list according to the value that the user clicks on from the md-checkbox list. So far I haven't been able to capture that value.

I've tried this in my component:

public filterByCategory(option) {
    console.log('Category filter ' + option + ' was clicked');
}

But that just prints the mouse event to the console:

'Category filter [object MouseEvent] was clicked'

I also tried using the two-way-bound value, like this:

public filterByCategory(option) {
    console.log('Category filter ' + this.option.value + ' was clicked');
}

But that returns 'undefined'.

By the way, the options I'm trying access the values of here look like this in my component:

private categoryFilters = {
    enabled: true,
    options: [
        { toolbarLabel: 'A', label: 'Option A', value: false },
        { toolbarLabel: 'B', label: 'Option B', value: false },
        { toolbarLabel: 'C ', label: 'Option C ', value: false }
    ],
    text: null
};

What can use to actually get the value that was clicked on, in order to pass that into the filter function?

RemyaJ · Accepted Answer · 2017-04-17 17:37:31Z

2

Try this. (click)="optionClicked(option)">

optionClicked(option) {
console.log(option.value)
}

edited Apr 17, 2017 at 17:37

answered Apr 17, 2017 at 17:09

RemyaJ

5,5264 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Muirik Over a year ago

That gives me: MdCheckboxChange {source: MdCheckbox, checked: true}

Muirik Over a year ago

If I do: console.log(event.checked) -- I get "true". But what I need is the actual value.

RemyaJ Over a year ago

I did not get you. What do you mean by the actual value?

Muirik Over a year ago

So "true" means one of the three options was clicked. But I need to actually capture what the value was. So if option A is "Option A", I need to capture "Option A". So I don't just need a boolean returned, I need the value of that clicked option.

Muirik Over a year ago

This is still printing "false" to the console.

|

AVJT82 · Accepted Answer · 2017-04-17 17:56:46Z

UPDATE:

You can also try this:

<md-checkbox *ngFor="let option of categoryFilters.options" 
     [(ngModel)]="option.value" (change)="filterByCategory(option.label, $event)">
   {{option.label}}
</md-checkbox>

filterByCategory(value, checked) {
  if(checked) {
    console.log(value)
  }
}

Original answer:

You could do it like this: I removed the two-way-binding altogether, since we are using $event and value-attribute, so in this case ngModel is redundant. I also use change-event instead of click. So change your template to:

<md-checkbox *ngFor="let option of categoryFilters.options" 
    value="{{option.label}}" (change)="filterByCategory($event)">
       {{option.label}}
</md-checkbox>

And in the component, let's see if the checkbox is checked before actually looking at the option value.

filterByCategory(event) {
  if(event.checked) {
    console.log(event.source.value)
  }
}

This seems to work fine:

Demo

I am still getting 'undefined' in the console after trying this.
I will check now, thanks. By the way, I added info above as to how the options are modeled in the component.
Thanks, both of the provided answers ultimately worked. Much appreciated.

Collectives™ on Stack Overflow

Capturing Click Event to Pass Into Function in Angular App

2 Answers 2

7 Comments

Demo

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

9 Comments

Related