Making custom Angular Material multiSelect filterable component

[AurelienVernay]

What are you trying to do?

I'm trying to make a custom Angular Material multiSelect filterable component, such as this one :

I made a multi-select-search.component with this code :

export interface MultiSelectSearchOption {
    label: string;
    value: any;
}

export interface MultiSelectOverlayData {
    options: MultiSelectSearchOption[];
}

export const MULTI_SELECT_OVERLAY_DATA = new InjectionToken<
    MultiSelectOverlayData
>('MULTI_SELECT_OVERLAY_DATA');



//TEXT INPUT COMPONENTS
@Component({
    selector: 'multiSelectSearch',
    templateUrl: 'multiSelectSearch.component.html',
    styleUrls: ['./multiSelectSearch.component.scss'],
})
export class MultiSelectSearchComponent implements AfterViewInit {
    @Input() list: any[] = [];
    @Input() selection: any;
    /**
     * @param filterKey
     * @description the key of the object to filter out with the text input
     */
    @Input() filterKey: string;
    /**
     * @param labelKey
     * @description the key of the object to be used as label of option
     */
    @Input() labelKey: string;
    @Input() placeholder: string;
    @Output() valueChange = new EventEmitter<any[]>();
    @ViewChild('input', { static: false }) inputViewRef: ElementRef;
    public search = new FormControl('');
    private listOptions: MultiSelectSearchOption[] = [];
    private overlayRef: OverlayRef;
    constructor(private overlay: Overlay) {}

    ngAfterViewInit() {
        if (!this.list.length || !this.labelKey || !this.filterKey) {
            console.error(
                'Component usage require input of list, labelKey, filterKey component'
            );
            throw new Error();
        } else {
            this.search.valueChanges
                .pipe(debounceTime(1000))
                .subscribe(search => {
                    this.listOptions = (!search.length
                        ? this.list
                        : this.list.filter(e =>
                              e[this.filterKey]
                                  .toString()
                                  .toUpperCase()
                                  .startsWith(search.toUpperCase())
                          )
                    ).map(
                        (e: any): MultiSelectSearchOption => ({
                            label: e[this.labelKey],
                            value: e,
                        })
                    );
                    const tokens = new WeakMap();
                    tokens.set(MULTI_SELECT_OVERLAY_DATA, {
                        options: this.listOptions,
                    });
                    this.overlayRef = this.overlay.create({
                        hasBackdrop: false,
                        minWidth: '10vw',
                        minHeight: '10vh',
                        positionStrategy: this.overlay
                            .position()
                            .flexibleConnectedTo(this.inputViewRef)
                            .withPositions([
                                {
                                    offsetX: 0,
                                    offsetY: 0,
                                    originX: 'start',
                                    originY: 'top',
                                    overlayX: 'start',
                                    overlayY: 'top',
                                    panelClass: [],
                                    weight: 1,
                                },
                            ]),
                    });
                    const multiSelectPortal = new ComponentPortal(
                        MultiSelectOverlayComponent,
                        null,
                        tokens
                    );
                    this.overlayRef.attach(multiSelectPortal);
                });
        }
    }
}

// OVERLAY COMPONENT
@Component({
    selector: 'multi-select-overlay',
    template: `
        <mat-card>
            <mat-selection-list #list>
                <mat-list-option
                    *ngFor="let option of listOptions"
                    [value]="option.value"
                    >{{ option.label }}</mat-list-option
                >
            </mat-selection-list>
        </mat-card>
    `,
})
export class MultiSelectOverlayComponent implements AfterViewInit {
    @ViewChild('list', { static: false }) list: MatSelectionList;
    public get listOptions() {
        return this.data.options as MultiSelectSearchOption[];
    }
    constructor(
        @Inject(MULTI_SELECT_OVERLAY_DATA)
        private data: MultiSelectOverlayData
    ) {
        console.log('data', data);
    }

    ngAfterViewInit() {
        this.list.selectionChange.pipe(
            //emit value
            tap(x => console.log(x))
        );
    }
}

Everything seems to be working fine, but when i try to iterate over my data.options element, i get the following error :

What troubleshooting steps have you tried?

I put a console.log of the data object passed, i can see that it is indeed an Array :

What are you seeing that does not match your expectations?
I don't understand why the component created by the ComponentPortal fail to use ngFor on an Array.?

Reproduction

We can only help if we can reproduce the problem ourselves.

Use StackBlitz to demonstrate what you are trying to do:
Full error and code here :
https://components-issue-55qrra.stackblitz.io/

Steps to reproduce:

1. Use stackblitz to reproduce error

Environment

• Angular: 8.1.1
• CDK/Material: 8.0.2
• Browser(s): Chrome
• Operating System Windows,

[andrewseguin]

The root cause of the issue is that the overlay component is being given an injector that does not contain differs for ngFor. This is because you created the overlay as a component without any parent injector that had these differs.

In multi-select-search.component.ts, when you create the ComponentPortal, be sure to include the current injector using a PortalInjector:

const tokens = new WeakMap();
tokens.set(MULTI_SELECT_OVERLAY_DATA, {
  options: this.listOptions,
});
const injector = new PortalInjector(this.injector, tokens);

...

const multiSelectPortal = new ComponentPortal(MultiSelectOverlayComponent, null, injector);

https://stackblitz.com/edit/components-issue-jiqe9q?file=app/app.component.ts

[AurelienVernay]

Thank you for the answer, couldn't find it out by myself !

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}