angular 2 child component not getting input data

Question

in my case i am trying to emit an event with data from one child of the parent to another child of the same parent. basically between siblings.

the code looks like

Child A

 @Output() makeIsrCall = new EventEmitter<LeadModel>()
 startCall(){
    this.makeIsrCall.emit(this.lead)
}

Parent .html

    <app-isr-call-toolbar *ngIf="core.isrCallInProgress == true" [data]="isrContact"></app-isr-call-toolbar>
 <app-edit-opty-workarea  [objId]="tb.id" [objType]="tb.objectType" (makeIsrCall)="makeCall($event)"></app-edit-opty-workarea>

.ts

 isrContact:any
 makeCall(lead:LeadModel){
    this.isrContact = lead
  }

Child B .ts

@Input() data:any
 constructor(private core:CoreStructureService) { 
    console.log('called construct for isr component')

    alert(this.data) //this comes undefined
  }

What is "Parent Child A"? Parent or child? – Günter Zöchbauer Feb 06 '18 at 08:49 — Günter Zöchbauer, Feb 06 '18 at 08:49
Please try to reproduce in http://stackblitz.com – Günter Zöchbauer Feb 06 '18 at 08:50 — Günter Zöchbauer, Feb 06 '18 at 08:50
try to initialize isrContact – Khaled Ahmed Feb 06 '18 at 08:52 — Khaled Ahmed, Feb 06 '18 at 08:52

score 3 · Accepted Answer · answered Feb 06 '18 at 08:51

The constructor is looong done before the data arrives

Either use ngOnChanges lifecycle callback

@Input() data:any

constructor(private core:CoreStructureService) { 
    console.log('called construct for isr component')
}

ngOnChanges() {
    alert(this.data) //this comes undefined
}

or make data a setter

@Input() set data(value:any) {
    this._data = value;
    alert(this._data) //this comes undefined
}

constructor(private core:CoreStructureService) { 
    console.log('called construct for isr component')
}

score 0 · Answer 2 · answered Feb 06 '18 at 09:22

0

your code looks fine, but instead of constructor try to get the value is ngOnInit or ngOnChanges.

e.g.

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

this works !!

answered Feb 06 '18 at 09:22

Debasish Pothal

71
7

angular 2 child component not getting input data

2 Answers2