[Fixed] Angular: Member <function-name> is not callable

Issue

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!

Solution

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.