Ad

Angular: Passing Data From Child1 To Parent To Child2

- 1 answer

Using angular6.

I have a parent component and 2 child component. I am trying to pass data from child1 component to child2 component as below:

Below is child1 component where I created @Output

--Child1--

import { Component, OnInit, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'ct-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
   @Output() eventClicked: EventEmitter<any> = new EventEmitter();

   //Button click event on child - need to pass some values here, below is an example
   nextClicked() {
    this.eventClicked.emit('from clause');
  }
}

Below parent component listens to child1

--Parent--

<form class="form-horizontal" role="form">
    <div class="row">
       <ct-child1 (eventClicked)="childEventClicked($event)"></ct-child1>
       <ct-child2></ct-child2>
    </div>
</form> 

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'ct-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit  {

public clickedEvent: string;

  childEventClicked(event) {
    this.clickedEvent = event;    
  }
}

Finally below is child2 component which is trying to listen the value

--Child2--

import { Component, OnInit, Input  } from '@angular/core';

@Component({
  selector: 'ct-child2',
  templateUrl: './child2.component.html',
  styleUrls: ['./child2.component.css']
})
export class Child2Component implements OnInit {
  constructor() { }
  @Input() event: string;

  //Button click event on Child2 - But here this.event returns undefined
    ValueFromChild1() {
    alert(this.event);
  }

  ngOnInit() {
  }
}

The issue I am facing above is in the ValueFromChild1() event above in Child2Component the value of this.event is coming to be undefined. Not sure whats missing here or I am not doing something correctly. I can see the value being passed from Child1 to parent correctly but cant get that value in child2.

Could anyone point whats missing above?

Not sure if I should create a separate question but Apart from this could you also let me know how can I create a model, populate it and then pass it instead of just passing a string as above.

Thanks

--Updated code--

--Child1--

import { Component, OnInit, Output, EventEmitter} from '@angular/core';
import { MyModel } from './data.model';

@Component({
  selector: 'ct-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
   myModelData = {} as MyModel;
   @Output() eventClicked: EventEmitter<MyModel> = new EventEmitter();
   selectedDdlValue: string = '';
    dropDownChange() {
        if (this.selectedDdlValue == '') {
           this.eventClicked = null;
        }
    }

   //Button click event on child - need to pass some values here, below is an example
   nextClicked() {
    this.myModelData.ddlValue = this.selectedDdlValue;
    this.eventClicked.emit(this.myModelData);
  }
}


--Parent--

<form class="form-horizontal" role="form">
    <div class="row">
       <ct-child1 (eventClicked)="childEventClicked($event)"></ct-child1>
       <ct-child2 [event]="clickedEvent" *ngIf="clickedEvent"></ct-child2>
    </div>
</form> 

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'ct-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit  {

 public clickedEvent: string;

  childEventClicked(event) {
    this.clickedEvent = event;   
  }
}

--Child2--

import { Component, OnInit, Input  } from '@angular/core';
import { MyModel } from './data.model';

@Component({
  selector: 'ct-child2',
  templateUrl: './child2.component.html',
  styleUrls: ['./child2.component.css']
})
export class Child2Component implements OnInit {
  constructor() { }
     @Input() event: MyModel;


  ngOnInit() {
  }
}
Ad

Answer

You have a @Input() event: string; on your Child2Component but you're not inputting anything in the template <ct-child2></ct-child2>.

Your template needs to look like:

<ct-child2 [event]="clickedEvent"></ct-child2>

If you want to pass a model to the child component:

--YourModel.ts--

export class YourModel {
    foo: string;
}

--Child1--

import { Component, OnInit, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'ct-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
   @Output() eventClicked: EventEmitter<YourModel> = new EventEmitter();

   //Button click event on child - need to pass some values here, below is an example
   nextClicked() {
    const model = new YourModel();
    model.foo = 'bar';
    this.eventClicked.emit(model);
  }
}

--Parent--

<form class="form-horizontal" role="form">
    <div class="row">
       <ct-child1 (eventClicked)="childEventClicked($event)"></ct-child1>
       <ct-child2></ct-child2>
    </div>
</form> 

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'ct-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit  {

public clickedEvent: YourModel;

  childEventClicked(event) {
    this.clickedEvent = event;    
  }
}


--Child2--

import { Component, OnInit, Input  } from '@angular/core';

@Component({
  selector: 'ct-child2',
  templateUrl: './child2.component.html',
  styleUrls: ['./child2.component.css']
})
export class Child2Component implements OnInit {
  constructor() { }
  @Input() event: YourModel;

  //Button click event on Child2 - But here this.event returns undefined
    ValueFromChild1() {
    alert(this.event);
  }

  ngOnInit() {
  }
}
Ad
source: stackoverflow.com
Ad