How to listen for a Lookup change

I cannot find anywhere in the documentation how to detect a change of the Lookup component. The same goes also for other components that do not use ngModel, like the Pick. There is even related issue on GitHub with no response for over 2 months.

Here is example code:

<ngl-lookup [(value)]="value" [lookup]="lookupAsync" field="formatted_address" [(pick)]="address">
  <template nglLookupLabel>Type an address:</template>
  <div nglLookupHeader class="slds-text-body--small">Most relevant cities</div>
  <template nglLookupItem let-ctx>
    <div class="slds-media__body">
      <div class="slds-lookup__result-text">{{ctx.formatted_address}}</div>
      <span class="slds-lookup__result-meta slds-text-body--small">Place ID: {{ctx.place_id}}</span>
    </div>
  </template>
</ngl-lookup>

And related plucker can be found on the components page in "Lookups" section:

http://ng-lightning.github.io/ng-lightning/#/components

Am I missing something? I am really confused to see so many components not using ngModel.

Thank you in advance for your help.

Solution

[(pick)]="address"

Above syntax is a two-way data binding. In the sense it binds data from component to input and input to component .
It is a shortcut to [pick]="superhero" (pickChange)="setSuperhero($event)"

where setSuperhero sets updated value to this.superhero.

Solution to your problem:

change [(pick)]="superhero" to this :

[pick]="superhero" (pickChange)="superheroPicked($event)"

Inside component :

superheroPicked(superhero){
    this.superhero = superhero; 
    console.log(superhero);
}

The above will set superhero to new value when selected and also prints the value in console.