In angular2, how to make child image changes when parent image changes?

Question

For example, we have two images, one is in parent component, the other is in child component. Click child image can make the parent image changes, which is easy to implement. But how can I change child image when click parent image?

Answer 1

Your plunker doesn't work so it's a little hard to figure out where your specific problem is. But the general case isn't too hard.

If you want to make the parent change when the child is clicked, you just need to use an output on the child. For example - clicking the child here alternates the image in the parent (working plunk)

import {Component, Output, EventEmitter} from 'angular2/core'


@Component({
  selector: "child";
  template:`
    <div>
     <h3>  Child Image: </h3>
      <img src="{{uri}}" (click)="imageClicked($event)" />
      </div>
  `
})
export class childComponent {
  @Output() wasClicked: EventEmitter<Node> = new EventEmitter();
  uri: string = "https://upload.wikimedia.org/wikipedia/commons/e/e5/Элемент_И-НЕ_%28100%29.PNG"

  imageClicked(e) {
    console.log("child component recieved click" )
    this.wasClicked.emit(e)
  }
}

@Component({
  selector: "parent";
  template:`
    <div>
      <h2> Parent Image: </h2>
      <img src="{{uri}}" />
     </div>
    <child (wasClicked)="childClicked(e)"></child>
  `,
  directives: [childComponent]
})
export class parentComponent {
  switch: boolean = false;
  uri: string = "https://upload.wikimedia.org/wikipedia/commons/1/14/Элемент_Исключающее_ИЛИ_%28100%29.png"

  childClicked(e){
    console.log("parent recieved click event from child")
    this.switch
    ? this.uri = "https://upload.wikimedia.org/wikipedia/commons/1/14/Элемент_Исключающее_ИЛИ_%28100%29.png"
    : this.uri = "https://upload.wikimedia.org/wikipedia/commons/7/7a/Элемент_ИЛИ-НЕ_%28100%29.PNG"
    this.switch = !this.switch

  }
}

Answer 2

I would see several ways to do that:

• Create a custom event (using @Output) in the child component and fires the event to notify the parent component. See this link for more details: `Error: Output is not defined` when passing value outside a directive to parent directive
• Inject the parent component instance into the child one. From the child component, directly update the property used for the image in the parent. See this answer for more details: Angular2 Exception: No provider for Service
• Use a shared service with an EventEmitter property to make communicate parent and child components. See this link for more details: Delegation: EventEmitter or Observable in Angular2

Answer 3

how to change child image when click parent image?

In general, when a parent wants to communicate something to a child, use a child input property. If you want to execute some logic, implement ngOnChanges() to be notified when an input property changes:

ngOnChanges(changes) {
  console.log(changes);
}

I assume you want to do something in PauseBtnComponent when input propertyplayBtnStatus changes:

ngOnChanges(changes) {
  console.log(changes);
  if(changes.playBtnStatus.currentValue) { ... }
  else { ... }
}

Plunker

---

Another option is to use @ViewChild, @ViewChildren, or @Query in the parent component to get references to the child(ren). Then you can call public method(s) on the child.