title: To highlight selected item after component refresh
body: <p><strong>SCENARIO:</strong> I have component called <code>list</code>, which display  all <code>customers</code> in the list. In this list I have written conditions like this:</p>
  
  <p>1) By default 1st <code>list-item(Ex customer 1)</code> will be selected and that selected <code>list-item(Ex customer 1)</code> will be emitted to another component called <code>display</code>.</p>
  
  <p>2) Then on clicking any  <code>list-item(i,e customer)</code> the selected list item also emitted <code>display</code> component. As in the below images:</p>
  
  <p><a href="https://i.stack.imgur.com/paFx7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/paFx7.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/SIHiB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SIHiB.png" alt="enter image description here"></a></p>
  
  <p><strong>contact-list component code:</strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;mat-selection-list&gt;
      &lt;mat-list-option [ngClass]="{selected : currentContact &amp;&amp; contact.Name == currentContact.Name}" *ngFor="let contact of contacts"&gt;
             &lt;a mat-list-item (click)="onSelect(contact)"&gt;{{ contact.Name }} &lt;/a&gt;
      &lt;/mat-list-option&gt;
  &lt;/mat-selection-list&gt;
  </code></pre>
  
  <p><strong>TS</strong></p>
  
  <pre><code>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&lt;void&gt; {
      this.customers = await this.customersService.getCustomersList('');
      this.customerRefreshed();
    }
  
     public ngOnChanges(changes: SimpleChanges): void {===&gt;To emit 1st contact by default
      if (this.contacts &amp;&amp; this.contacts.length &gt; 0) {
      this.currentContact = this.contacts[0];
      this.select.emit(this.currentContact);
      }
     }
  
    public customerRefreshed() { ====&gt; To refresh the list after updating
      this.customersService.customerUpdated.subscribe((data: boolean) =&gt; {
          if(data) {
              this.customers = await this.customersService.getCustomersList('');
          }
      });  
  
    }
  
    public onSelect(contact: IContact): void {===&gt; To emit contact on click
      this.select.emit(contact);
    }
  
  
  }
  </code></pre>
  
  <p>Now i have another component to <code>update the contacts</code>, There i will update selected <code>contact</code> by performing <code>PUT</code> operation then i will refresh the <code>contact-list</code> again.To see the changes. </p>
  
  <p><strong>update-contact component code:</strong></p>
  
  <pre><code>public updateCustomer(): void {
      this.someCustomer = this.updateForm.value;
      this.customersService.UpdateCustomer(this.someCustomer, this.someCustomer.id).subscribe(
        () =&gt; {  // If POST is success
          this.customersService.customerUpdated.next(true);
          this.successMessage();
        },
        (error) =&gt; {  // If POST is failed
          this.failureMessage();
        }
      );
    }
  </code></pre>
  
  <p><strong>services file:</strong></p>
  
  <pre><code>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&lt;boolean&gt;;
  
  
    constructor() {
      this.customerUpdated = new Subject&lt;boolean&gt;();
   }
  
    public async getCustomersList(): Promise&lt;ICustomer[]&gt; {
      const apiUrl: string = `${this.baseUrl}/customers`;
      return this.http.get&lt;ICustomer[]&gt;(apiUrl).toPromise();
   }
  
    public UpdateCustomer(customer: ICustomer, id: string): Observable&lt;object&gt; {
       const apiUrl: string = `${this.baseUrl}/customers/${id}`;
       return this.http.post(apiUrl, customer);
    }
  
  }
  </code></pre>
  
  <p>Now the issues, Suppose if i <code>select/click</code> the 2nd <code>list-item(Customer 2)</code>  to update, Then after updating the <code>list-item(Customer 1)</code> is selected by default like this:</p>
  
  <p><a href="https://i.stack.imgur.com/mAFNL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mAFNL.png" alt="enter image description here"></a> </p>
  
  <p>But after update the previously clicked <code>list-item(Customer 2)</code> must be in <code>selected</code> state again,<strong>even after refreshing the <code>list</code> like this</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/jfsbt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jfsbt.png" alt="enter image description here"></a></p>