listening to a model in component angular 2

Question

I'm using angular 2. I have a scenario where i have a component, interface and directive.

This directive is used to for autosuggestions and my interface is used as a model.

So whenever user selects a value, I am updating the model and is there a way where my component will listen to the model changes.

directive - model - component interaction

how will the component listen to the model changes which I am making through directive? also Can a model be used to hold the data?

Answer 1

Use inputs, outputs and binding like:

(not really an auto-complete but it should get you started)

@Component({
  selector: 'auto-complete',
  template: `
  <select [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)">
    <option *ngFor="#val of values" [value]="val">{{val}}</option>
  </select>`})
export class AutoCompleteComponent {
  @Input() values:string[];
  @Output() valueChange:EventEmitter<string> = new EventEmitter<string>();
  value:string;
}

@Component({
  selector: 'parent',
  directives: [AutoCompleteComponent],
  template: `
<auto-complete [value]="options" (valueChange)="onUpdate($event)"></auto-complete>
`})
export class AppComponent {
  options = ['a', 'b', 'c', 'd', 'e'];
  onUpdate(event) {
    console.log(event);
  }
}