Angular Material 2 - fill autocomplete when another autocomplete is selected - mongodb

Question

i have two Angular2 Material 2 Autocomplete fields: Customers and branches. So when the user now selects one specific customer in the first field, i want to retrieve the branches from my mongoDB who have the customerID from the customer the user selected.
But I'm not able to get the solution.
createHardware.component.ts
myControlCustomers: FormControl = new FormControl();
availableCustomers = [];
filteredCustomers: Observable<any[]>;
selectedCustomers = null;
selectedCustomersName = '';
this.availableCustomers = [];
this.customerService.getCustomers().subscribe(customers => {
this.availableCustomers = customers.customer;
});
this.filteredCustomers = this.myControlCustomers.valueChanges
.pipe(
startWith(''),
map(valCustomer => this.filterCustomers(valCustomer))
);
filterCustomers(valCustomer: any): any[] {
return this.availableCustomers.filter(customers => {
return customers.name.toLowerCase().indexOf(valCustomer.toLowerCase()) > -1;
});
}
createHardware.component.html
<div class="form-group">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Kunden auswählen" aria-label="Number" matInput [formControl]="myControlCustomers" [matAutocomplete]="auto2" [(ngModel)]="selectedCustomersName">
<mat-autocomplete #auto2="matAutocomplete">
<mat-option *ngFor="let customer of filteredCustomers | async" [value]="customer._id" (onSelectionChange)="getBranches()">
{{ customer.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>

Answer 1

Here I have made whole working example as per your question ,
Template side :
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Selct User" aria-label="Number" matInput [formControl]="usersControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)='getPosts($event.option.value)'>
<mat-option *ngFor="let user of users" [value]="user.id">
{{ user.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="text" placeholder="Posts From User" aria-label="Number" matInput [formControl]="postsControl" [matAutocomplete]="auto2">
<mat-autocomplete #auto2="matAutocomplete">
<mat-option *ngFor="let post of posts" [value]="post.id">
{{ post.title }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
Component Side :
usersControl: FormControl = new FormControl();
postsControl: FormControl = new FormControl();
users:any[] = [];
posts:any[] = [];
constructor(private http : HttpClient){
}
ngOnInit(){
let url = 'https://jsonplaceholder.typicode.com/users/';
this.http.get(`${url}`).subscribe(users => {
this.users = [...users];
});
}
getPosts(userId){
let url = 'https://jsonplaceholder.typicode.com/posts?userId='+userId;
this.http.get(`${url}`).subscribe(posts => {
this.posts = [...posts];
});
}
WORKING EXAMPLE
Hope this will clear all your doubts.

Answer 2

Change your component.html to
<div class="form-group">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Kunden auswählen" aria-label="Number" matInput [formControl]="myControlCustomers" [matAutocomplete]="auto2" >
<mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayFnCustomer">
<mat-option *ngFor="let customer of filteredCustomers | async" [value]="customer" (onSelectionChange)="getBranches(customer)">
{{ customer.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div class="form-group">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Kunden auswählen" aria-label="Number" matInput [formControl]="myControlBranches" [matAutocomplete]="auto3" >
<mat-autocomplete #auto3="matAutocomplete" [displayWith]="displayFnBranch">
<mat-option *ngFor="let branch of filteredBranches | async" [value]="branch" (onSelectionChange)="getXXX(branch)">
{{ branch.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
And define following in your component.ts
myControlCustomers: FormControl = new FormControl();
availableCustomers = [];
filteredCustomers: Observable<any[]>;
selectedCustomer: any;
myControlBranches: FormControl = new FormControl();
availableBranches = [];
filteredBranches: Observable<any[]>;
selectedBranch: any;
this.filteredCustomers = this.myControlCustomers.valueChanges
.pipe(
startWith(''),
map(val => this.filterCustomers(val))
);
filterCustomers(val: any): any[] {
let name = val.name ? val.name : val;
return this.availableCustomers.filter(customer => {
return customer.name.toLowerCase().indexOf(name.toLowerCase()) > -1;
});
}
this.filteredBranches = this.myControlBranches.valueChanges
.pipe(
startWith(''),
map(val => this.filterBranches(val))
);
filterBranches(val: any): any[] {
let name = val.name ? val.name : val;
return this.availableBranches.filter(branch => {
return branch.name.toLowerCase().indexOf(name.toLowerCase()) > -1;
});
}
displayFnCustomer(customer: any): string {
return customer? customer.name : customer;
}
displayFnBranch(branch: any): string {
return branch? branch.name : branch;
}
getBranches(customer) {
this.selectedCustomer = customer;
// here you can use customer._id to fetch branches
// this.http....
}
getXXX(branch) {
this.selectedBranch = branch;
// here you can use branch._id if you want for any purpose
}
Hope this would resolve your requirement.