0

I want to add a mat-select control with multiple option with mat-select-trigger. My html code:

                <mat-tab label="DB Connection">
                <mat-form-field class="example-full-width">
                    <mat-label>Database</mat-label>
                    <mat-select [formControl]="types" multiple>
                        <mat-select-trigger>
                            {{types.value?.[0] || ''}}
                            <span *ngIf="(types.value?.length || 0) > 1" class="example-additional-selection">
                                (+{{(types.value?.length || 0) - 1}} {{types.value?.length === 2 ? 'other' :
                                'others'}})
                            </span>
                        </mat-select-trigger>
                        <mat-option *ngFor="let type of typeList" [value]="type">{{type}}</mat-option>
                    </mat-select>
                    <mat-icon matSuffix>storage</mat-icon>
                </mat-form-field>
            </mat-tab>

I get the following error:

Parser Error: Unexpected token [, expected identifier or keyword at column 14 in [ {{types.value?.[0] || ''}} ] in ng:///AppModule/CommSettingsComponent.html@62:48 (" [ERROR ->]<mat-option *ngFor="let type of typeList" [value]="type">{{type}} "): ng:///AppModule/CommSettingsComponent.html@69:28, Directive MatOption

If I remove the {{types.value?.[0] || ''}} line, the error disappears. How could I solve the error?

I'm using:
Angular CLI: 8.3.29
Node: 14.17.6
OS: win32 x64
Angular: 8.2.14
@angular/material: 8.2.3

Ionut
  • 724
  • 2
  • 9
  • 25
  • Please replace the image of your error with the text version. – JustLudo Apr 13 '23 at 08:49
  • @JustLudo, I have edited. – Ionut Apr 13 '23 at 08:52
  • 1
    `{{(types?.value ||[''])[0]}}` – Eliseo Apr 13 '23 at 09:01
  • It might be the case that the type of `types.value` is not what you expect. I would suggest you to temporarely use the Angular `json` pipe to debug your object in the browser, like so `{{types?.value | json}}`. – Giacomo Parolin Apr 13 '23 at 09:14
  • Does this answer your question? [optional chaining is not working: Cannot read property '0' of undefined](https://stackoverflow.com/questions/64104994/optional-chaining-is-not-working-cannot-read-property-0-of-undefined) – Edric Apr 13 '23 at 18:48

0 Answers0