How to set an arrow-style function as a default parameter for Input()

Question

So I have a component that displays rows of data in a table. I have an input for the function that should run if someone double clicks a row. I want to default that to doing something with the router.

This works fine:

@Input() rowDoubleClickedFunction: (result: T) => void = this.routeToDetailsPage;
private routeToDetailsPage(result: T) {
    this.router.navigate(['route here']);
}

This is abbreviated to get the point across. I'm really doing some other things in the function before making the router call. But as soon as I change the bottom function to the arrow syntax:

@Input() rowDoubleClickedFunction: (result: T) => void = this.routeToDetailsPage;
private routeToDetailsPage = (result: T) => {
    //Something more complicated with "this" which necessitates using arrow syntax        
    this.router.navigate(['route composed from code above']);
};

I get an error: Property 'routeToDetailsPage' is used before its initialization.ts(2729)

It doesn't appear to be an issue with the linter. Is there a way to do this or am I out of luck?

Answer 1

Class fields are evaluated in order. You're doing

@Input()
public rowDoubleClickedFunction = this.routeToDetailsPage;
private routeToDetailsPage = …;

which accesses the routeToDetailsPage property before it is initialised. Flip them around:

private routeToDetailsPage = (result: T) => {
    …
};
@Input()
rowDoubleClickedFunction: (result: T) => void = this.routeToDetailsPage;

or if you're not using routeToDetailsPage anywhere else, just drop it entirely and write only

@Input()
rowDoubleClickedFunction: (result: T) => void = (result: T) => {
    …
};