SCENARIO: Let's consider a scenario where I have a component named list, responsible for displaying a list of all customers. Within this list, certain conditions are set up as follows:
1) Initially, the 1st list-item (e.g. Customer 1) is selected by default, and this selected list-item (e.g. Customer 1) is then emitted to another component called display.
2) Upon clicking on any list-item (i.e. customer), the selected list item is also emitted to the display component. Visual representation shown in the images below:
https://i.sstatic.net/1p2Qb.png https://i.sstatic.net/6P1Ch.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>
CSS
.selected {
background-color:gray;
}
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);
}
}
In addition, there is another component used to update the contacts. Here, when a selected contact undergoes a PUT operation, it triggers an update, followed by a refreshing of the contact-list to reflect those changes.
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);
}
}
If a situation arises where I select/click the 2nd list-item(Customer 2) for an update, the issue observed is that after the update process completes, the previously clicked list-item(Customer 1) defaults back to being selected again. Ideally, post-update, the originally selected list-item(Customer 2) should remain in a selected state even after refreshing the list, depicted in the following image: