I’ve been trying to create an datepicker/input using Angular Materials date picker component.
I’m iterating over a set of reports and need to create an input for each one, next to it.
Every report has a custom date on it, beyond which a custom filter applies, transforming the allowed dates into basically swiss cheese. In other words the rules are to complex for min/max, and I need to use the filter function for it, and hand it the individual report.

When implementing this, I stumbled over a particularly intersting behavior: Angular cannot handle lambdas for filter functions.
Here is a ticket I wrote (apparently this is expected behavior)

Github Issue

Stackblitz

The gist is that a loop in the change detection will cause the expression to be reevaluated indefinitely because it’s a new lambda every time. Using the OnPush change detection strategy has no effect here, it’s still a cycle.

I was hoping to associate a loop variable (“@for (report of reports; track report) { }”)
with a filter. I need to gain access to this template loop variable in TypeScript.
This is normally possible, except that $event isn’t supported for [matDatepickerFilter].
Using a function that returns a lambda compatible with the filter functions type works on paper but causes the component to stop working in practice (See stackblitz).
There doesn’t seem to be a way to hand the ‘matInput’ or ‘matNativeControl’ don’t implement ‘exportAs’ so ‘#var=matInput’ is out of the question as well.
Changing the change detection strategy does not prevent this issue either.
I’m out of ideas.

What design patterns can I use to associate a report with an input and set a filter for a date picker based on that report?

I can provide a more complete Stackblitz or edit the current one, if it helps.