Prevent Mat-chip from adding row after selection - html

Question

I am trying to prevent the mat-chip module from automatically adding a row after one chip has been selected. The max chip count is 1, so I disable the input after the user selects an item from the dropdown. But, it still adds a row beneath it as if they can type more. How can I prevent that?
<mat-chip-list #chipList aria-label="Fruit selection" >
<mat-chip
*ngFor="let item of selected; let i = index"
[selectable]="!disabled"
[removable]="!disabled"
(removed)="remove(i)">
{{item[filterProperty]}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input
[maxLength]="maxLength"
[value]="optionBaseValue"
[placeholder]="label" #chipsInput
[disabled]="(selected.length === maxCount) || inEditMode === false"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(focus)="autoInputValue($event)"
(focusout)="resetAutoInputValue($event)"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="itemSelected($event)" (onBlur)="itemSelected($event)">
<mat-option *ngFor="let item of filteredItems | async " [value]="item">
<div > {{item[filterProperty]}}</div>
</mat-option>
</mat-autocomplete>
Thank you!!

Answer 1

You could use something like:
<input [hidden]="selected.length === 1"
Note that you can change the conditional however you like.