CODEWITHSUNDEEP
angularmat-list
Timy Shark
Timy Shark

Reputation: 11

Angular 15+, mat-selection-list event (ngModelChange) or (selectionChange) stuck until lost focus

I have this code HTML

<mat-selection-list #contactsList [(ngModel)]="selectedAssociation" (ngModelChange)="onAssociateSelectionChanged($event)" [multiple]=false hideSingleSelectionIndicator=true>
      <mat-list-option *ngFor="let contact of model_list?.list; index as i; first as isFirst" color="primary" [value]="contact" [selected]="isFirst" >
        <mat-icon matListItemIcon class="mat-list-item-icon">{{contactClassIcons[contact.contact_types_id!]}}</mat-icon>
        <div matListItemTitle class="profile-line-primary">
          {{contact.contact_typeclass_title}}
      </div>
      <div matListItemLine class="profile-line-secondary">
        {{contact.contact_info}}
    </div>
      </mat-list-option>
    </mat-selection-list>

and the component ts : correction, idNotify is not @Output()

idNotify: IdNotify;
onAssociateSelectionChanged(selectedAssociationList:ProfileContact[] | ProfileAcademy[]){
  console.log('SelectedContact:',selectedAssociationList)
  let selectedAssociationModel : ProfileContact | ProfileAcademy = (selectedAssociationList.length == 0 && this.model_list!.list.length >0)? this.model_list?.list[0] : selectedAssociationList[0];
      this.id_notify = //send downstream to commands to process
        new IdNotify()  //<----**code stuck here**
    console.log('sending downstream ', selectedAssociationModel)
}

the id_notify is the downstream event notification to the child profile-contact-edit,

as follows

<profile-contact-edit [idNotify]="idNotify" "></profile-contact-edit>

and the ts for profile-contact-edit has a setter for idNotify as follows:

@Input() set idNotify(id: IdNotify) {
    console.log(`id   ${JSON.stringify(id)}  `) }

The behaviour works as expected in the inital setup, the child does receive the idNotify as expected. after that, when I click on another list item in the parent list, the new list item selected and the event triggered correctly, but the code stuck at the line when I set the idNotify property. until I click anywhere outside the list, then the code continues on as expected and the child receives the change. Note: I have tried

  <mat-list-option *ngFor="let contact of model_list?.list"  [value]="contact" (click)="onAssociateSelectionChanged(contact.value)"  >

with same results, it stuck at the same spot until I click out side list.

So in short, the code stuck until the list loses focus, so the question is: How can I make sure the code continues while the list still having the focus.

Upvotes: 0

Views: 851

Answers (1)

Eliseo
Eliseo

Reputation: 57909

I general an Output should be an EventEmitter

 @Output() idNotifyChange= new EventEmitter<IdNotify>();

It's used emit

   idNotifyChange.emit(new IdNotify())

And get it using binding event

<profile-contact-edit (idNotifyChange)="idNotify=$event" >
</profile-contact-edit>

Upvotes: 1

Related Questions