SCENARIO: A component named list is used to display a list of all customers. The conditions are as follows:
1) By default, the first list-item (e.g. customer 1) is selected and emitted to another component called display.
2) When any other list-item (i.e. customer) is clicked, that item is also emitted to the display component. Refer to the images below:
https://i.sstatic.net/paFx7.png https://i.sstatic.net/SIHiB.png
Contact-list component code:
HTML
<mat-selection-list>
<mat-list-option [ngClass]="{selected : currentContact && contact.Name == currentContact.Name}" *ngFor="let contact of contacts">
<a mat-list-item (click)="onSelect(contact)">{{ contact.Name }} </a>
</mat-list-option>
</mat-selection-list>
TS
import { Component Input,EventEmitter,Output} from '@angular/core';
import { ICustomer} from 'src/app/models/app.models';
import { CustomersService } from 'src/app/services/customers.service';
@Component({
selector: 'drt-customers-list',
templateUrl: './customers-list.component.html',
styleUrls: ['./customers-list.component.scss'],
})
export class CustomerListComponent {
public customers: ICustomer[] ;
public currentContact: IContact;
@Output()
public select = new EventEmitter();
constructor(public customersService: CustomersService,) {}
public async ngOnInit(): Promise<void> {
this.customers = await this.customersService.getCustomersList('');
this.customerRefreshed();
}
public ngOnChanges(changes: SimpleChanges): void {===>To emit 1st contact by default
if (this.contacts && this.contacts.length > 0) {
this.currentContact = this.contacts[0];
this.select.emit(this.currentContact);
}
}
public customerRefreshed() { ====> To refresh the list after updating
this.customersService.customerUpdated.subscribe((data: boolean) => {
if(data) {
this.customers = await this.customersService.getCustomersList('');
}
});
}
public onSelect(contact: IContact): void {===> To emit contact on click
this.select.emit(contact);
}
}
Another component is available to perform contact updates, where a selected contact is updated using a PUT operation and then the list must be refreshed to reflect the changes. See below for the code:
update-contact component code:
public updateCustomer(): void {
this.someCustomer = this.updateForm.value;
this.customersService.UpdateCustomer(this.someCustomer, this.someCustomer.id).subscribe(
() => { // If POST is success
this.customersService.customerUpdated.next(true);
this.successMessage();
},
(error) => { // If POST is failed
this.failureMessage();
}
);
}
services file:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ICustomer} from 'src/app/models/app.models';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class CustomersService {
private baseUrl : string = '....Url....';
public customerUpdated: Subject<boolean>;
constructor() {
this.customerUpdated = new Subject<boolean>();
}
public async getCustomersList(): Promise<ICustomer[]> {
const apiUrl: string = `${this.baseUrl}/customers`;
return this.http.get<ICustomer[]>(apiUrl).toPromise();
}
public UpdateCustomer(customer: ICustomer, id: string): Observable<object> {
const apiUrl: string = `${this.baseUrl}/customers/${id}`;
return this.http.post(apiUrl, customer);
}
}
The issue arises when selecting/clicking the 2nd list-item(Customer 2) for an update. After the update, the default selection reverts to the 1st list-item(Customer 1), which should not be the case. The previously clicked list-item(Customer 2) should remain in a selected state even after refreshing the list, as shown here:
https://i.sstatic.net/mAFNL.png
After the update, the previously selected list-item(Customer 2) should remain in a selected state.: