import { Component, Input, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { DataService } from './data.service'

@Component({
    selector: 'tr[app-myComp]',
    template: `
                    <td><button [disabled]="isDisabled">{{data.prop1}}</button></td>
                    <td><button [disabled]="isDisabled">{{data.prop2}}</button></td>
                `
})

export class MyComponent implements OnInit {
  subscription: Subscription;

  @Input()
  isDisabled: boolean;

  @Input()
  data: {prop1: number, prop2: number};

    constructor(public service: DataService) {
this.subscription = service.disabled$.subscribe(
            () => {
                    this.isDisabled = true;
            }
        );
    }

  ngOnInit() {}

  ngOnDestroy(){
    this.subscription.unsubscribe();
  }

}

import { AfterViewInit, Component, QueryList, ViewChildren } from '@angular/core';

import { MyComponent } from './myComponent'
import { DataService } from './data.service'

@Component({
  selector: 'app-body',
  template: `<table>
                <tr class="">
                  <td>buttons</td>
                </tr>
                <tr app-myComp [isDisabled]="isDisabled" [data]="data" [isDisabled]="isDisabled" (dblclick)="makeDisabled()"></tr>
             </table>

<button (click)="getNewData()">Get</button>
            `,
})
export class AppComponent implements AfterViewInit  {

  constructor(
    public service: DataService
  ){}

  isDisabled: boolean = false;
  data: {prop1: number, prop2: number} = {prop1: 13, prop2: 16};

  makeDisabled(): void {
    this.service.makeDisabled()
  }

  getNewData(): void {
    //service call
    this.data = {prop1: 45, prop2: 56};
    this.isDisabled = !this.isDisabled;
    this.isDisabled = false;
  }
}