Angular: Member <function-name> is not callable

Question

I'm assigning an imported function to a component property in the constructor in order to use it in the template.

Builds happen properly, but in my editor (Visual Studio Code with Angular Language Service), the below error is shown.

Below is the code of my exported function.

export function downloadFile(fileUrl: string, fileName: string) {
    let a = document.createElement('a');
    a.href = fileUrl;
    a.download = fileName;
    a.click();
}

Below is my code in the component.

import { downloadFile } from '../../shared/utilities';

@Component({
    ...
})
export class SomeComponent {
    downloadFile: any;

    constructor() {
        this.downloadFile = downloadFile;
    }
}

I can't get why this error is shown. Please help!

Answer 1

I think instead of declaring your download file this way in your component file

downloadFile: any;

You should declare it this way

downloadFile: () => any;

check this out if it helps.

Answer 2

Just in case it will help someone, I had the same problem and the answer above wasn't even close to the solution. After some attempt, I found out it was caused by a name conflict. I had a template variable with the same name as a method. Angular was trying to invoke the template variable, and it ended up showing that error message. For example:

// template
<form #foo (ngSubmit)="foo()">

// typescript
foo() {
...
}

It says:

[Angular] member foo is not callable