On click event, change the input field to a brother component

advertisements

I'm trying to detect a click in a child component. In its sibling component, I want to empty out the input field within it. Let me show you a brief example of what I mean:

// Parent component template:
<div>
  <child1-comp></child1-comp>
  <child2-comp></child2-comp>
</div>

.

// child1-comp template:
<input type="text" #inputText (keyup)="0">

.

// child2-comp template:
<ul>
  <li (click)="onClick(text1.value)" #text1>Test</li>
  <li (click)="onClick(text2.value)" #text2>Test2</li>
</ul>

After one of the click events in child2-comp, I want to empty out the value in the input field in child1-comp.

Is this possible to do in Angular 2?


I suggest the following:

// Parent component template:
<div>
  <child1-comp [(value)]="value"></child1-comp>
  <child2-comp (click)="value=''"></child2-comp>
</div>

.

// child1-comp template:
<input type="text" [(ngModel)]="value" (keyup)="0">

.

// child2-comp template:
<ul>
  <li (click)="click.emit(text1.value)" #text1>Test</li>
  <li (click)="click.emit(text2.value)" #text2>Test2</li>
</ul>