d3.js - How to ckeck many linked properties in angular2 and d3? -

i trying make linked views using d3 , angular2. currently, have 1 property linked, selected item, updated views. example:

export class barchartcomponent implements oninit {   @input() data: number[] = [1, 2, 3, 4];   @input() selected: number = undefined;   @output() selectedchange: eventemitter<number> = new eventemitter<number>(); // ... 

then on hover, change emitted:

ngoninit() {     let self = this;     // ...     // code setting bar chart in d3     // ...     self.bars         .on('mouseover', function (d, i){              self.selectedchange.emit(i)      } ); } 

and, selected item updated:

  ngafterviewchecked() {     this.bars       .attr('class', ( d, ) => {         return === this.selected ? 'bar selected' : 'bar';       });   } 

but, not sure if right approach. if had more 1 property linked, or if data had updated online, not sure how identify attribute has updated.

here plunker sample code: https://plnkr.co/edit/xmryrraymzhkkv9qy0i2?p=preview

thanks in advance