AWS Blu Age L3 workshop - User experience : Improvement - Dynamic auto complete issue

When I rewrote the component around line 30 in ...\carddemo-web\angular\src\app\dynamic-field\custom\dynamic-autocomplete.component.ts as shown below, it displayed as expected.

1. Added panelWidth="auto" to mat-autocomplete tag to enable automatic width adjustment.
2. Added [ngStyle]="{'width': 'auto', 'min-width': '100%', 'max-width': 'none'}" to mat-option tag to control option width.
3. Added styles array to the component

(...)
</div>  
    `,
    styles: [`
        ::ng-deep .mat-autocomplete-panel {
            min-width: 100% !important;
            max-width: none !important;
            width: auto !important;
        }
        ::ng-deep .mat-option {
            white-space: nowrap;
            overflow: visible;
        }
    `],
    providers: [
(...)

For me, I just change the size of the dynamic-autocomplete tag to 25 to expand the width.

<div class='lgr_2 col_41'><dynamic-autocomplete [options]='getMenuOptions()' [id]='"option"' [size]=25 [line]=20 [column]=41 [(ngModel)]='option'></dynamic-autocomplete></div>

It seems you're encountering an issue with the auto-complete feature in the AWS Blu Age L3 workshop, specifically in the User Experience Improvement section for COMEN01. The drop-down menu options not being visible suggests there might be a problem with your code implementation.

To resolve this issue, you should review your code changes in both the HTML and TypeScript files. Here are some key points to check:

1. In the comen01-comen1a.component.html file, ensure you've correctly implemented the dynamic-autocomplete tag:

<dynamic-autocomplete [options]='getMenuOptions()' [id]='"option"' [size]=2 [line]=20 [column]=41 [(ngModel)]='option'></dynamic-autocomplete>

2. In the comen01-comen1a.component.ts file, verify that:

a. You've imported the Option interface correctly:

import { Option } from "../../dynamic-field/custom/dynamic-autocomplete.component";

b. The OptionImpl class is defined correctly:

export class OptionImpl implements Option {
constructor (value: string, label: string) {
this.value = value
this.label = label
}
value: string;
label: string;
}

c. The getMenuOptions() method is implemented within the component class:

getMenuOptions (): Option[] {
let menuOptions : Option[] = []
// ... (rest of the implementation)
return menuOptions
}

3. Ensure that the OptionImpl class declaration is placed before the @Component decorator in your TypeScript file.

4. Check that the getMenuOptions() method is inside the Comen01Comen1aComponent class, after the ngAfterViewInit() method.

If you've made these changes and are still experiencing issues, it might be worth reviewing your entire component structure to ensure all parts are in the correct order and properly implemented. If the problem persists, you may need to check for any console errors or seek further assistance from the workshop support team.

Sources
Angular code compilation failed after making changes for autocomplete tag in Appstream - AWS Blu Age L3 Workshop | AWS re:Post