How to set default values for mat autocomplete
来源： https://stackoverflow.com/questions/56208062/how-to-set-default-values-for-mat-autocomplete
mat-autocomplete
How to add horizontal scroll to mat autocomplete
问题 I am running angular app , I have auto complete on this, I want to add horizontal scroll to the mat-option, I tried applying css style .cdk-overlay-pane { overflow-x: auto; } then applying syle as told in this docuemnt [enter link description here][1] showPanel: boolean <mat-option class="CustomerDropDown" showPanel="true" ... extended question <mat-form-field > <input matInput [matAutocomplete]="auto" [formControl]="customerFilterControl"> <mat-autocomplete panelWidth ="450px" #auto=
How to display entire option value when hovered in mat-autocomplete
问题 This is demo app that uses mat-autocomplete, I picked from stackoverflow post enter link description here , I want to display option entire value. When the value is long. I found similar question asked enter link description here but this hasn't solved my problem. I can scroll and see the value, can modify css style so the scroll bar is properly visible. Looks like remaining part of scroll bar is hidden! I tried .mat-option { z-index:5000; height:300px; } Nothing has worked out! It would be
Writing unit test for component which uses mat-autocomplete
问题 I am new to Angular, I am trying to build a text field with autocomplete using Angular 5. I found this example in Angular Material docs: https://stackblitz.com/angular/kopqvokeddbq?file=app%2Fautocomplete-overview-example.ts I was wondering how to write a unit test for testing the autocomplete functionality. I am setting a value to the input element and triggering an 'input' event and tried selecting the mat-option elements, but see that none of them got created: Relevant part of my component
Angular : Dynamically push data to observable without changing value in input
问题 I have used mat-autocomplete with Angular material 7. this.salesPickerAutoComplete$ = this.autoCompleteControl.valueChanges.pipe( startWith(''), debounceTime(400), distinctUntilChanged(), switchMap(value => { if (value && value.length > 2) { return this.getSalesReps(value); } else { return of(null); } }) ); getSalesReps(value: string): Observable<any[]> { const params = new QueryDto; params.$filter = `substringof('${value}',FirstName) or substringof('${value}',LastName)`; params.$select =
Angular mat-autocomplete - Dynamic add/delete item issue
问题 I'm trying to create a simple form with a dynamic number of mat-autocomplete fields. However, in some cases, the inputs' displayed values get lost . Component's script export class AutocompleteSimpleExample { availableItems = [{name: 'item1'}, {name: 'item2'}]; items = [{name: 'item1'}, {}]; addItem() { this.items.push({}); } deleteItem(i: number) { this.items.splice(i, 1); } displayObject(obj) { return obj ? obj.name : null; } } Component's view <form> <mat-form-field *ngFor="let item of
How to save selected object using mat-chip and autocomplete in angular material 2
I am using Angular 6 with Angular Material. I am trying to save a selected object or list of selected object from mat-chip and autocomplete. I am able to send string value to fruits[] array but can not able to send selected object in to fruits[] array. Please help me to find a solution. Thanks. My Demo Project Link: demo code on stackblitz You can try this solution. I have created a demo on Stackblitz . component.html <mat-form-field class="example-chip-list"> <mat-chip-list #chipList> <mat-chip *ngFor="let fruit of fruits;let indx=index;" [selectable]="selectable" [removable]="removable"