Add functionality to custom element contained in page

Help Requests
1

I’ve got a custom element that is a datepicker with input fields for day and year and dropdown list for Month. This is used in other components for date input only and the datevalue bound to different elements within the class using it.

I have a requirement to use it in another page to control the search value on a table (we’re using au-table).

Problem: I need to be able to reset the date value. I can do this in the custom datepicker element which will clear the datepicker value via a reset button, but I also need to be able clear the filter value in the parent page using another button.

Is there a way to somehow be able to have both buttons in the parent page, with the reset button calling back to the custom-element view model to clear the model AND clear the datevalue in the parent class? Or is there perhaps a better, more Aurelia-onic way?

e.g.
Parent class
au-table with filters object for searching/filtering table
include datepicker and bind datevalue of datepicker VM to local variable in parent class
reset button to clear datepicker value and clear filter on parent class
search button use the value of the datepicker to filter the table

1 Like
2

I think you might be looking for something like this?
Using .call

1 Like
3

Thanks @airboss001 - I have made a start down that path after seeing it mentioned. Cheers.

1 Like
4

As it turns out, there was a much simpler solution for the issue I was facing. By adding a new bindable string on the child class and marking that as observable in the parent class, handling the change triggered by the child component meant I could take additional action in the parent

//datepicker.ts
@bindable resetstring: string;
public resetDateValue = () => {
	this.selectedDay = '';
	this.selectedMonth = '';
	this.selectedYear = '';
	this.datevalue = '';
	this.resetstring = "reset";
}

//parent.ts
@observable resetstring: string
private resetValueChanged(newValue: string) {
	if (newValue === "reset")
	{
		this.filters[1].value = '';
	}
}

A matter of KISS :slight_smile:

3 Likes
5

I was made for refactoring you baby … Dum dum dum … :wink:

1 Like