[file-uploader] label and input id include text 'undefined'

[cuddlecake]

⚡ Reproduction

StackBlitz link to reproduce the issue: https://stackblitz.com/angular/emkdqdpgdry?file=src%2Fapp%2Ffile-uploader-reactive-example.html

Steps to reproduce:

1. Run the stackblitz (one of the examples from the docs)
2. Inspect the HTML, specifically the label's "for" attribute and the input's "id" attribute, which will be undefined-input

📗 Expected Behavior

Have a unique ID for label and input

📕 Actual Behavior

ID's are undefined-input and undefined-label across all instances of file-uploader

📦 Environment

• Aquila/NDBX version: Detected on 14.2.0, still present on 15.1.0
• Angular/CDK version: Doesn't matter
• Browser name & version: Doesn't matter
• Operating System & version (desktop or mobile): Doesn't matter

Cause & Fix

The FileUploaderComponent has this code (same order, as original source, but irrelevant code omitted for brevity):

    _inputId = `${this.id}-input`;
    _labelId = `${this.id}-label`;

    get id(): string {
        return this._id;
    }
    private _id = `nx-file-uploader-${nextId++}`;

Because get id() is hoisted up and used before _id is initialized, the getter returns undefined, resulting in undefined-input and undefined-label respectively.

This can be fixed by changing the order of declarations.

[yd-allianz]

Hi @cuddlecake

thanks for reporting, this in fact is a known problem introduced with v14. We're working to fix it and will update your ticket as soon as we have updates.

[yd-allianz]

Hi @cuddlecake

the fix for this problem is now released.