Mixing
ngx-mat-select-search doesn't works
0
I wanted to implement ngx-mat-select-search in a form I use, but unfortunately, it doesn't works (I can't open the dropdown - it doesn't show me any value).
My html:
<div class="form">
<mat-form-field>
<mat-select placeholder="Kunde" name="customer" #customer="ngModel" [(ngModel)]="currentCustomer"
(ngModelChange)="dofilterCustomer()">
<ngx-mat-select-search></ngx-mat-select-search>
<mat-option *ngFor="let customer of customers | async" [value]="customer">
{{customer}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
My .ts file:
import { Component, Inject, OnInit, ViewChild } from "@angular/core";
import {
MAT_DIALOG_DATA,
MatDialogRef,
MatDialogModule,
MatSelect
} from "@angular/material";
import { TableService } from "../table.service";
import { FormControl, Validators } from "@angular/forms";
import { EntryDTO, Customer } from "../../models";
import { SecurityService } from "src/app/security/security.service";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { Observable } from "rxjs";
import { map, startWith } from "rxjs/operators";
@Component({
selector: "app-add-dialog",
templateUrl: "./add-dialog.component.html",
styleUrls: ["./add-dialog.component.css"]
})
export class AddDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<AddDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: EntryDTO,
public dataService: TableService
) {}
customers!: Observable<string>;
currentCustomer = "";
forwarders!: Observable<string>;
currentForwarder = "";
bins!: Observable<string>;
currentBin = "";
@ViewChild("singleSelect") singleSelect!: MatSelect;
ngOnInit() {}
dofilterCustomer() {
this.customers = this.dataService
.getAllCustomers()
.pipe(map(customers => this.filter(customers, this.currentCustomer)));
}
dofilterForwarder() {
this.forwarders = this.dataService
.getAllForwarders()
.pipe(map(forwarders => this.filter(forwarders, this.currentForwarder)));
}
dofilterBins() {
this.bins = this.dataService
.getAllBins()
.pipe(map(bins => this.filter(bins, this.currentBin)));
}
formControl = new FormControl("", [
Validators.required
// Validators.email,
]);
getErrorMessage() {
return this.formControl.hasError("required")
? "Required field"
: this.formControl.hasError("email")
? "Not a valid email"
: "";
}
submit() {
this.dataService.addEntry(this.data);
}
onNoClick(): void {
this.dialogRef.close();
}
public confirmAdd(): void {
this.dataService.addEntry(this.data);
}
filter(values: string, current: string) {
return values.filter(value => value.toLowerCase().includes(current));
}
}
Initially I had the following code in my html. Then it worked, but i had no dropdown, just an "autocomplete-list":
<div class="form">
<mat-form-field class="example-full-width accent">
<input type="text" #input placeholder="Kunde" aria-label="Number" name="customer" #customer="ngModel" matInput
[(ngModel)]="currentCustomer" (ngModelChange)="dofilterCustomer()" [matAutocomplete]="auto1" required>
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
<mat-autocomplete #auto1="matAutocomplete">
<mat-option *ngFor="let customer of customers | async" [value]="customer">
{{customer}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
Maybe anybody could see what i am doing wrong ?
Thank you in advance.
angular typescript angular-material
edited Nov 19 '18 at 13:28
veben
1,0712921
asked Nov 19 '18 at 13:14
Chris
23613
add a comment |
0
I wanted to implement ngx-mat-select-search in a form I use, but unfortunately, it doesn't works (I can't open the dropdown - it doesn't show me any value).
My html:
<div class="form">
<mat-form-field>
<mat-select placeholder="Kunde" name="customer" #customer="ngModel" [(ngModel)]="currentCustomer"
(ngModelChange)="dofilterCustomer()">
<ngx-mat-select-search></ngx-mat-select-search>
<mat-option *ngFor="let customer of customers | async" [value]="customer">
{{customer}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
My .ts file:
import { Component, Inject, OnInit, ViewChild } from "@angular/core";
import {
MAT_DIALOG_DATA,
MatDialogRef,
MatDialogModule,
MatSelect
} from "@angular/material";
import { TableService } from "../table.service";
import { FormControl, Validators } from "@angular/forms";
import { EntryDTO, Customer } from "../../models";
import { SecurityService } from "src/app/security/security.service";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { Observable } from "rxjs";
import { map, startWith } from "rxjs/operators";
@Component({
selector: "app-add-dialog",
templateUrl: "./add-dialog.component.html",
styleUrls: ["./add-dialog.component.css"]
})
export class AddDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<AddDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: EntryDTO,
public dataService: TableService
) {}
customers!: Observable<string>;
currentCustomer = "";
forwarders!: Observable<string>;
currentForwarder = "";
bins!: Observable<string>;
currentBin = "";
@ViewChild("singleSelect") singleSelect!: MatSelect;
ngOnInit() {}
dofilterCustomer() {
this.customers = this.dataService
.getAllCustomers()
.pipe(map(customers => this.filter(customers, this.currentCustomer)));
}
dofilterForwarder() {
this.forwarders = this.dataService
.getAllForwarders()
.pipe(map(forwarders => this.filter(forwarders, this.currentForwarder)));
}
dofilterBins() {
this.bins = this.dataService
.getAllBins()
.pipe(map(bins => this.filter(bins, this.currentBin)));
}
formControl = new FormControl("", [
Validators.required
// Validators.email,
]);
getErrorMessage() {
return this.formControl.hasError("required")
? "Required field"
: this.formControl.hasError("email")
? "Not a valid email"
: "";
}
submit() {
this.dataService.addEntry(this.data);
}
onNoClick(): void {
this.dialogRef.close();
}
public confirmAdd(): void {
this.dataService.addEntry(this.data);
}
filter(values: string, current: string) {
return values.filter(value => value.toLowerCase().includes(current));
}
}
Initially I had the following code in my html. Then it worked, but i had no dropdown, just an "autocomplete-list":
<div class="form">
<mat-form-field class="example-full-width accent">
<input type="text" #input placeholder="Kunde" aria-label="Number" name="customer" #customer="ngModel" matInput
[(ngModel)]="currentCustomer" (ngModelChange)="dofilterCustomer()" [matAutocomplete]="auto1" required>
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
<mat-autocomplete #auto1="matAutocomplete">
<mat-option *ngFor="let customer of customers | async" [value]="customer">
{{customer}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
Maybe anybody could see what i am doing wrong ?
Thank you in advance.
angular typescript angular-material
edited Nov 19 '18 at 13:28
veben
1,0712921
asked Nov 19 '18 at 13:14
Chris
23613
add a comment |
0
0
0
I wanted to implement ngx-mat-select-search in a form I use, but unfortunately, it doesn't works (I can't open the dropdown - it doesn't show me any value).
My html:
<div class="form">
<mat-form-field>
<mat-select placeholder="Kunde" name="customer" #customer="ngModel" [(ngModel)]="currentCustomer"
(ngModelChange)="dofilterCustomer()">
<ngx-mat-select-search></ngx-mat-select-search>
<mat-option *ngFor="let customer of customers | async" [value]="customer">
{{customer}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
My .ts file:
import { Component, Inject, OnInit, ViewChild } from "@angular/core";
import {
MAT_DIALOG_DATA,
MatDialogRef,
MatDialogModule,
MatSelect
} from "@angular/material";
import { TableService } from "../table.service";
import { FormControl, Validators } from "@angular/forms";
import { EntryDTO, Customer } from "../../models";
import { SecurityService } from "src/app/security/security.service";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { Observable } from "rxjs";
import { map, startWith } from "rxjs/operators";
@Component({
selector: "app-add-dialog",
templateUrl: "./add-dialog.component.html",
styleUrls: ["./add-dialog.component.css"]
})
export class AddDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<AddDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: EntryDTO,
public dataService: TableService
) {}
customers!: Observable<string>;
currentCustomer = "";
forwarders!: Observable<string>;
currentForwarder = "";
bins!: Observable<string>;
currentBin = "";
@ViewChild("singleSelect") singleSelect!: MatSelect;
ngOnInit() {}
dofilterCustomer() {
this.customers = this.dataService
.getAllCustomers()
.pipe(map(customers => this.filter(customers, this.currentCustomer)));
}
dofilterForwarder() {
this.forwarders = this.dataService
.getAllForwarders()
.pipe(map(forwarders => this.filter(forwarders, this.currentForwarder)));
}
dofilterBins() {
this.bins = this.dataService
.getAllBins()
.pipe(map(bins => this.filter(bins, this.currentBin)));
}
formControl = new FormControl("", [
Validators.required
// Validators.email,
]);
getErrorMessage() {
return this.formControl.hasError("required")
? "Required field"
: this.formControl.hasError("email")
? "Not a valid email"
: "";
}
submit() {
this.dataService.addEntry(this.data);
}
onNoClick(): void {
this.dialogRef.close();
}
public confirmAdd(): void {
this.dataService.addEntry(this.data);
}
filter(values: string, current: string) {
return values.filter(value => value.toLowerCase().includes(current));
}
}
Initially I had the following code in my html. Then it worked, but i had no dropdown, just an "autocomplete-list":
<div class="form">
<mat-form-field class="example-full-width accent">
<input type="text" #input placeholder="Kunde" aria-label="Number" name="customer" #customer="ngModel" matInput
[(ngModel)]="currentCustomer" (ngModelChange)="dofilterCustomer()" [matAutocomplete]="auto1" required>
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
<mat-autocomplete #auto1="matAutocomplete">
<mat-option *ngFor="let customer of customers | async" [value]="customer">
{{customer}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
Maybe anybody could see what i am doing wrong ?
Thank you in advance.
angular typescript angular-material
edited Nov 19 '18 at 13:28
veben
1,0712921
asked Nov 19 '18 at 13:14
Chris
23613
I wanted to implement ngx-mat-select-search in a form I use, but unfortunately, it doesn't works (I can't open the dropdown - it doesn't show me any value).
My html:
<div class="form">
<mat-form-field>
<mat-select placeholder="Kunde" name="customer" #customer="ngModel" [(ngModel)]="currentCustomer"
(ngModelChange)="dofilterCustomer()">
<ngx-mat-select-search></ngx-mat-select-search>
<mat-option *ngFor="let customer of customers | async" [value]="customer">
{{customer}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
My .ts file:
import { Component, Inject, OnInit, ViewChild } from "@angular/core";
import {
MAT_DIALOG_DATA,
MatDialogRef,
MatDialogModule,
MatSelect
} from "@angular/material";
import { TableService } from "../table.service";
import { FormControl, Validators } from "@angular/forms";
import { EntryDTO, Customer } from "../../models";
import { SecurityService } from "src/app/security/security.service";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { Observable } from "rxjs";
import { map, startWith } from "rxjs/operators";
@Component({
selector: "app-add-dialog",
templateUrl: "./add-dialog.component.html",
styleUrls: ["./add-dialog.component.css"]
})
export class AddDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<AddDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: EntryDTO,
public dataService: TableService
) {}
customers!: Observable<string>;
currentCustomer = "";
forwarders!: Observable<string>;
currentForwarder = "";
bins!: Observable<string>;
currentBin = "";
@ViewChild("singleSelect") singleSelect!: MatSelect;
ngOnInit() {}
dofilterCustomer() {
this.customers = this.dataService
.getAllCustomers()
.pipe(map(customers => this.filter(customers, this.currentCustomer)));
}
dofilterForwarder() {
this.forwarders = this.dataService
.getAllForwarders()
.pipe(map(forwarders => this.filter(forwarders, this.currentForwarder)));
}
dofilterBins() {
this.bins = this.dataService
.getAllBins()
.pipe(map(bins => this.filter(bins, this.currentBin)));
}
formControl = new FormControl("", [
Validators.required
// Validators.email,
]);
getErrorMessage() {
return this.formControl.hasError("required")
? "Required field"
: this.formControl.hasError("email")
? "Not a valid email"
: "";
}
submit() {
this.dataService.addEntry(this.data);
}
onNoClick(): void {
this.dialogRef.close();
}
public confirmAdd(): void {
this.dataService.addEntry(this.data);
}
filter(values: string, current: string) {
return values.filter(value => value.toLowerCase().includes(current));
}
}
Initially I had the following code in my html. Then it worked, but i had no dropdown, just an "autocomplete-list":
<div class="form">
<mat-form-field class="example-full-width accent">
<input type="text" #input placeholder="Kunde" aria-label="Number" name="customer" #customer="ngModel" matInput
[(ngModel)]="currentCustomer" (ngModelChange)="dofilterCustomer()" [matAutocomplete]="auto1" required>
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
<mat-autocomplete #auto1="matAutocomplete">
<mat-option *ngFor="let customer of customers | async" [value]="customer">
{{customer}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
Maybe anybody could see what i am doing wrong ?
Thank you in advance.
angular typescript angular-material
angular typescript angular-material
edited Nov 19 '18 at 13:28
veben
1,0712921
asked Nov 19 '18 at 13:14
Chris
23613
edited Nov 19 '18 at 13:28
veben
1,0712921
asked Nov 19 '18 at 13:14
Chris
23613
edited Nov 19 '18 at 13:28
veben
1,0712921
edited Nov 19 '18 at 13:28
veben
1,0712921
edited Nov 19 '18 at 13:28
veben
1,0712921
1,0712921
asked Nov 19 '18 at 13:14
Chris
23613
asked Nov 19 '18 at 13:14
Chris
23613
asked Nov 19 '18 at 13:14
Chris
23613
23613
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You need to initialize this.customers. I suggest to initially set the observable as a replay subject and load the customers initially as follows:
customers: ReplaySubject<string> = new ReplaySubject<string>(1);
ngOnInit() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(customers));
}
and
dofilterCustomer() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(this.filter(customers, this.currentCustomer)));
}
See also the example implementation https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example and https://github.com/bithost-gmbh/ngx-mat-select-search/issues/83
edited Dec 6 '18 at 14:52
Chris
23613
answered Dec 6 '18 at 8:48
Esteban Marin
32615
i got the following error: "Property 'next' does not exist on type 'Observable<string>'." so i changed the line "customers!: Observable<string> = new ReplaySubject<string>(1);" to the following: customers!: ReplaySubject<string> = new ReplaySubject<string>(1); and now it works! thank you so much
– Chris
Dec 6 '18 at 14:45
1
glad it works. I updated my answer. can you mark it as the accepted answer?
– Esteban Marin
Dec 6 '18 at 14:52
moreover, you should place the(ngModelChange)="dofilterCustomer()"on the<ngx-mat-select-search>element to trigger filtering when the search keyword changes: ` <ngx-mat-select-search [(ngModel)]="this.currentCustomer" (ngModelChange)="dofilterCustomer()>`
– Esteban Marin
Dec 6 '18 at 15:12
thanks for the info. tbh i didn't checked the filter option. also now my rest service doesn't works anymore ;). i'll take a look at it tomorrow and will update this thread
– Chris
Dec 6 '18 at 15:21
please forget about my last comment. now everything works perfectly fine!
– Chris
Dec 6 '18 at 16:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375443%2fngx-mat-select-search-doesnt-works%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You need to initialize this.customers. I suggest to initially set the observable as a replay subject and load the customers initially as follows:
customers: ReplaySubject<string> = new ReplaySubject<string>(1);
ngOnInit() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(customers));
}
and
dofilterCustomer() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(this.filter(customers, this.currentCustomer)));
}
See also the example implementation https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example and https://github.com/bithost-gmbh/ngx-mat-select-search/issues/83
edited Dec 6 '18 at 14:52
Chris
23613
answered Dec 6 '18 at 8:48
Esteban Marin
32615
i got the following error: "Property 'next' does not exist on type 'Observable<string>'." so i changed the line "customers!: Observable<string> = new ReplaySubject<string>(1);" to the following: customers!: ReplaySubject<string> = new ReplaySubject<string>(1); and now it works! thank you so much
– Chris
Dec 6 '18 at 14:45
1
glad it works. I updated my answer. can you mark it as the accepted answer?
– Esteban Marin
Dec 6 '18 at 14:52
moreover, you should place the(ngModelChange)="dofilterCustomer()"on the<ngx-mat-select-search>element to trigger filtering when the search keyword changes: ` <ngx-mat-select-search [(ngModel)]="this.currentCustomer" (ngModelChange)="dofilterCustomer()>`
– Esteban Marin
Dec 6 '18 at 15:12
thanks for the info. tbh i didn't checked the filter option. also now my rest service doesn't works anymore ;). i'll take a look at it tomorrow and will update this thread
– Chris
Dec 6 '18 at 15:21
please forget about my last comment. now everything works perfectly fine!
– Chris
Dec 6 '18 at 16:09
add a comment |
1
You need to initialize this.customers. I suggest to initially set the observable as a replay subject and load the customers initially as follows:
customers: ReplaySubject<string> = new ReplaySubject<string>(1);
ngOnInit() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(customers));
}
and
dofilterCustomer() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(this.filter(customers, this.currentCustomer)));
}
See also the example implementation https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example and https://github.com/bithost-gmbh/ngx-mat-select-search/issues/83
edited Dec 6 '18 at 14:52
Chris
23613
answered Dec 6 '18 at 8:48
Esteban Marin
32615
i got the following error: "Property 'next' does not exist on type 'Observable<string>'." so i changed the line "customers!: Observable<string> = new ReplaySubject<string>(1);" to the following: customers!: ReplaySubject<string> = new ReplaySubject<string>(1); and now it works! thank you so much
– Chris
Dec 6 '18 at 14:45
1
glad it works. I updated my answer. can you mark it as the accepted answer?
– Esteban Marin
Dec 6 '18 at 14:52
moreover, you should place the(ngModelChange)="dofilterCustomer()"on the<ngx-mat-select-search>element to trigger filtering when the search keyword changes: ` <ngx-mat-select-search [(ngModel)]="this.currentCustomer" (ngModelChange)="dofilterCustomer()>`
– Esteban Marin
Dec 6 '18 at 15:12
thanks for the info. tbh i didn't checked the filter option. also now my rest service doesn't works anymore ;). i'll take a look at it tomorrow and will update this thread
– Chris
Dec 6 '18 at 15:21
please forget about my last comment. now everything works perfectly fine!
– Chris
Dec 6 '18 at 16:09
add a comment |
1
1
1
You need to initialize this.customers. I suggest to initially set the observable as a replay subject and load the customers initially as follows:
customers: ReplaySubject<string> = new ReplaySubject<string>(1);
ngOnInit() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(customers));
}
and
dofilterCustomer() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(this.filter(customers, this.currentCustomer)));
}
See also the example implementation https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example and https://github.com/bithost-gmbh/ngx-mat-select-search/issues/83
edited Dec 6 '18 at 14:52
Chris
23613
answered Dec 6 '18 at 8:48
Esteban Marin
32615
You need to initialize this.customers. I suggest to initially set the observable as a replay subject and load the customers initially as follows:
customers: ReplaySubject<string> = new ReplaySubject<string>(1);
ngOnInit() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(customers));
}
and
dofilterCustomer() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(this.filter(customers, this.currentCustomer)));
}
See also the example implementation https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example and https://github.com/bithost-gmbh/ngx-mat-select-search/issues/83
edited Dec 6 '18 at 14:52
Chris
23613
answered Dec 6 '18 at 8:48
Esteban Marin
32615
edited Dec 6 '18 at 14:52
Chris
23613
edited Dec 6 '18 at 14:52
Chris
23613
edited Dec 6 '18 at 14:52
Chris
23613
23613
answered Dec 6 '18 at 8:48
Esteban Marin
32615
answered Dec 6 '18 at 8:48
Esteban Marin
32615
answered Dec 6 '18 at 8:48
Esteban Marin
32615
32615
i got the following error: "Property 'next' does not exist on type 'Observable<string>'." so i changed the line "customers!: Observable<string> = new ReplaySubject<string>(1);" to the following: customers!: ReplaySubject<string> = new ReplaySubject<string>(1); and now it works! thank you so much
– Chris
Dec 6 '18 at 14:45
1
glad it works. I updated my answer. can you mark it as the accepted answer?
– Esteban Marin
Dec 6 '18 at 14:52
moreover, you should place the(ngModelChange)="dofilterCustomer()"on the<ngx-mat-select-search>element to trigger filtering when the search keyword changes: ` <ngx-mat-select-search [(ngModel)]="this.currentCustomer" (ngModelChange)="dofilterCustomer()>`
– Esteban Marin
Dec 6 '18 at 15:12
thanks for the info. tbh i didn't checked the filter option. also now my rest service doesn't works anymore ;). i'll take a look at it tomorrow and will update this thread
– Chris
Dec 6 '18 at 15:21
please forget about my last comment. now everything works perfectly fine!
– Chris
Dec 6 '18 at 16:09
add a comment |
i got the following error: "Property 'next' does not exist on type 'Observable<string>'." so i changed the line "customers!: Observable<string> = new ReplaySubject<string>(1);" to the following: customers!: ReplaySubject<string> = new ReplaySubject<string>(1); and now it works! thank you so much
– Chris
Dec 6 '18 at 14:45
1
glad it works. I updated my answer. can you mark it as the accepted answer?
– Esteban Marin
Dec 6 '18 at 14:52
moreover, you should place the(ngModelChange)="dofilterCustomer()"on the<ngx-mat-select-search>element to trigger filtering when the search keyword changes: ` <ngx-mat-select-search [(ngModel)]="this.currentCustomer" (ngModelChange)="dofilterCustomer()>`
– Esteban Marin
Dec 6 '18 at 15:12
thanks for the info. tbh i didn't checked the filter option. also now my rest service doesn't works anymore ;). i'll take a look at it tomorrow and will update this thread
– Chris
Dec 6 '18 at 15:21
please forget about my last comment. now everything works perfectly fine!
– Chris
Dec 6 '18 at 16:09
i got the following error: "Property 'next' does not exist on type 'Observable<string>'." so i changed the line "customers!: Observable<string> = new ReplaySubject<string>(1);" to the following: customers!: ReplaySubject<string> = new ReplaySubject<string>(1); and now it works! thank you so much
– Chris
Dec 6 '18 at 14:45
i got the following error: "Property 'next' does not exist on type 'Observable<string>'." so i changed the line "customers!: Observable<string> = new ReplaySubject<string>(1);" to the following: customers!: ReplaySubject<string> = new ReplaySubject<string>(1); and now it works! thank you so much
– Chris
Dec 6 '18 at 14:45
1
1
glad it works. I updated my answer. can you mark it as the accepted answer?
– Esteban Marin
Dec 6 '18 at 14:52
glad it works. I updated my answer. can you mark it as the accepted answer?
– Esteban Marin
Dec 6 '18 at 14:52
moreover, you should place the
(ngModelChange)="dofilterCustomer()" on the <ngx-mat-select-search> element to trigger filtering when the search keyword changes: ` <ngx-mat-select-search [(ngModel)]="this.currentCustomer" (ngModelChange)="dofilterCustomer()>`– Esteban Marin
Dec 6 '18 at 15:12
moreover, you should place the
(ngModelChange)="dofilterCustomer()" on the <ngx-mat-select-search> element to trigger filtering when the search keyword changes: ` <ngx-mat-select-search [(ngModel)]="this.currentCustomer" (ngModelChange)="dofilterCustomer()>`– Esteban Marin
Dec 6 '18 at 15:12
thanks for the info. tbh i didn't checked the filter option. also now my rest service doesn't works anymore ;). i'll take a look at it tomorrow and will update this thread
– Chris
Dec 6 '18 at 15:21
thanks for the info. tbh i didn't checked the filter option. also now my rest service doesn't works anymore ;). i'll take a look at it tomorrow and will update this thread
– Chris
Dec 6 '18 at 15:21
please forget about my last comment. now everything works perfectly fine!
– Chris
Dec 6 '18 at 16:09
please forget about my last comment. now everything works perfectly fine!
– Chris
Dec 6 '18 at 16:09
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375443%2fngx-mat-select-search-doesnt-works%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
