title: Change property from SAME sibling components on click in Angular 4
body: <p>I have a parent component and in that component, 1 other component is included multiple times.</p>
  
  <p>Structure : </p>
  
  <p>parent component : </p>
  
  <pre><code>&lt;table&gt;
    &lt;tr class=""&gt;
      &lt;td&gt;buttons&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr app-myComp&gt;&lt;/tr&gt;
    &lt;tr app-myComp&gt;&lt;/tr&gt;
    &lt;tr app-myComp&gt;&lt;/tr&gt;
    &lt;tr app-myComp&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Child (myComp) component : </p>
  
  <pre><code>@Component({
  selector: 'tr[app-myComp]',
  template: `
                  &lt;td&gt;&lt;button [style.color]="myColor" (click)="changeColor()"&gt;changeColor&lt;/button&gt;&lt;/td&gt;    
              `
  })
  
  export class MyComponent {
  
  myColor: string = "blue";
  
  changeColor(): void{
      this.myColor = "red"
  }
  }
  </code></pre>
  
  <p>When I click on button , text color of button changes from blue to red.</p>
  
  <p>But my question is how can I change text color of <strong>only</strong> clicked button to red and reset all other button's text color to blue?</p>
  
  <p>I know I can get list of MyComponent by @ViewChildren but how can I use them to reset button's text color to blue except clicked one.</p>
  
  <p>I am using angular 4.3.4</p>
  
  <p>codepen link : <a href="https://codepen.io/ajinkya_b/project/editor/ZGgGNm" rel="nofollow noreferrer">Angular 4 app</a></p>