0

In my application I have one parent component and some child components. Need to implement child parent communication here.

  1. On click child1Component need to pass some data from child1Component to child2Component.
  2. Display that data in child2Component.

What I did:-

  1. Emitted values from child1 to parent and tried to bind/pass the same value from parent to child2.

  2. But am not getting the value in ngOnInit of child2 as shown below. Need to display that data in child2.

  3. Also the navigation to child2 is not working always redirecting to login page just after displaying the child2 for 1 or 2 seconds.

               Child1:

           <div (click)="onClickData(data)"></div>

           @Output() getData = new EventEmitter();

            onClickData (data:any) {
            this.getData.emit(data);
          }

          Child2:

          @Input() clickedItem: any = '';

          ngOnInit() {
            alert(this.clickedItem)
          }

          Parent:

          <app-child1
            (getdata)="getDataEvent($event)"
          >
          </app-child1>

          <app-child2
           [clickedItem] = "clickedData"
          >
          </app-child2>

          clickedData:any;

          getDataEvent($event: any) {
            this.clickedData = $event;
            this.router.navigate(['child2'])
          }
mevr
  • 1,075
  • 3
  • 14
  • 32

2 Answers2

3

ngOnInit will work only while initiating the component. Please use the ngOnChanges life cycle hook

Child2:

      @Input() clickedItem: any = '';

      ngOnChanges() {
        alert(this.clickedItem)
      }
JsNgian
  • 795
  • 5
  • 19
  • thank you so much for the reply let me try this, also i have updated the question with one more issue about the navigation! – mevr Aug 17 '21 at 12:43
  • 1
    is child 2 is used in child2 route also? – JsNgian Aug 17 '21 at 12:48
  • i tried ngOnchanges but the method is not executing, i cannot see an alert message. I could see one blank alert message when it was ngoninit! – mevr Aug 17 '21 at 12:49
  • No, child one and two has two separate routes – mevr Aug 17 '21 at 12:50
  • 1
    is child 1 and 2 are used in same page or different page? – JsNgian Aug 17 '21 at 12:51
  • same page, Child one and Child2 are sibling components, both siblings comes under one parent component .Both are loaded in the parent component's view. – mevr Aug 17 '21 at 12:56
  • `this.router.navigate(['child2'])` here are we again routing to child 2 component with a route url child2? Where are you expecting to display the alert? – JsNgian Aug 17 '21 at 13:13
  • I need to display data passed from child 1 in child2 component – mevr Aug 17 '21 at 15:31
  • ngOnChanges will execute when ever there is a change in @Input() variables of your component. Did you implement the OnChanges Interface in your child 2 class? – JsNgian Aug 17 '21 at 16:17
  • yes implemented, "implements OnInit, OnChanges {" – mevr Aug 17 '21 at 18:08
  • 1
    `this.getData.emit(data);` here what is the data you are passing? suppose if data = 'abc' and if you are passing same 'abc' as data in every click then it will not work because the data is not changing. In each click you have to pass different data. If you pass an object or array as data also will work. Please try this. – JsNgian Aug 18 '21 at 06:16
  • Oh! yes!, am passing same string value on every click.. am getting data in parent on first emit from child 1. From the parent am trying to bind the same value to child 2 but not working.. let me try using object/array! and i will get back! Thanks! – mevr Aug 18 '21 at 06:40
  • Actually there is no multiple click, there is only one click in child 1 but trying to pass same data to next sibling component via parent! and data is a string! i tried using array but nothing worked! – mevr Aug 18 '21 at 07:20
  • You can use `@ViewChild(Child2Component) child2: Child2Component` In the parent. And when ever you click set `child2.clickedItem = event;` – JsNgian Aug 20 '21 at 04:55
2

if you want to transfer data between two sibling components, you better use a service. see: https://stackoverflow.com/a/36018798/11952668

Daniel
  • 1,895
  • 9
  • 20
  • yes , i came to know that we can use service/subject to pass data between sibling components. But i would like to check whether this way of passing is possible or not..it was working for me once..in my old projects. – mevr Aug 17 '21 at 12:53
  • may i know, this way of communication is possible right? we can do this if we need to transfer a small bit of data. – mevr Aug 17 '21 at 12:58