3

I am able to pass the data from parent to child on template binding(on ngInit). but how can i share the same data when its updated at parent component. Is there is observable to share(from parent to child component) the updated data without involving service?

I tried the template with <child-template *ngIf='data' [data]='data'></child-template>

But this passes data only for 1 time. what if data gets updated in parent component?

Sridhar Natuva
  • 211
  • 1
  • 4
  • 16
  • 2
    take a look on https://angular.io/guide/observables there is also an explanation here on how to use observables and subjects https://stackoverflow.com/questions/39494058/behaviorsubject-vs-observable?answertab=active#tab-top – Hassan Al Bourji Jun 12 '19 at 11:59

3 Answers3

6

@Output in the ChildComponent

// ChildComponent 
@Output() OutputEvent: EventEmitter<string> = new EventEmitter();

// trigger the event to 'emit' the output event
onClick(): void {
    this.OutputEvent.emit('the string to be emitted');
}

ParentComponent

// ParentComponent view
<child-component (OutputEvent)="receiveValue($event)">

// ParentComponent controller
receiveValue($event){
    // $event is from ChildComponent = 'the string to be emitted'
}

Big Guns

Sometimes updates will not occur as you expect. Brush up on ngOnChanges to monitor for updates.

ngOnChanges(changes: SimpleChanges) {
    if ('varName' in changes) {
        // console.log(this.varName);
        // console.log(changes.varName.previousValue);
        // console.log(changes.varName.firstChange); // etc
    }
}

Two-Way Data Binding

I stay away from it. I've asked questions about it that no one seems to know the answers too regarding how to watch for its changes in the parent.

If you think you need 2WDB think about leveraging a service to sync the data via observable patterns.

CLARIFIED QUESTION: The question was clarified to parent to child cmmunication. Which is much easier. Using only @Input you can pass the child component a value with simple data-binding in the parent's view.

ChildComponent

// This property is bound using its original name.
@Input() bankName: string;

// this property value is bound to a different property name
// when this component is instantiated in a template.
@Input('originator') bankName: string;

ParentComponent view

<child-component [bankName]="parentComponentClassVariable"></child-component>
or send a string
<child-component [bankName]="'some string here'"></child-component>
Ben Racicot
  • 5,332
  • 12
  • 66
  • 130
  • Your answer is to share data from child to parent. I am looking for parent to child. – Sridhar Natuva Jun 12 '19 at 12:35
  • 1
    Sorry for not being clear in question.. . I am looking for how can i pass the updated data from parent tto child. Will events work from parent to child? – Sridhar Natuva Jun 12 '19 at 12:43
  • 1
    Updated with parent to child communication which is much simpler anyways. – Ben Racicot Jun 12 '19 at 12:50
  • After i pass the data to child, and the data in parent gets change, I am unable to get the updated data to child...This is my problem – Sridhar Natuva Jun 12 '19 at 12:53
  • So that's what I tried to touch on regarding updates and occasionally needing `ngOnChanges`. If you aren't triggering Angular's change detection you sometimes need to manually trigger it or watch `OnChanges`. Are you getting updated values there when values from the parent change? – Ben Racicot Jun 12 '19 at 12:55
  • Ok got it., `ngOnChanges` should be in child component? – Sridhar Natuva Jun 12 '19 at 12:57
  • 2
    Yes it will watch for changes. I have these issues too quite often. It's a quirk in Angular to get changes syncing nicely. If component to component communications becomes larger than say 2 back-forth setups I create a service. – Ben Racicot Jun 12 '19 at 12:59
  • Yea.. Thank you very much. – Sridhar Natuva Jun 12 '19 at 13:04
  • No problem, if you need more help please reach out. Please accept this as the answer to your question, thanks. – Ben Racicot Jun 12 '19 at 13:06
0

angular update data in child when it was updated in parent. You need to change link for object(reassiagn data, create new object). if you need to detect changes use ngOnChanges lifecycle hook

chestas
  • 124
  • 1
  • 6
0

Here is the simple approch that update parent val property from the child component by using property binding. In this approach, we did not have any method or listener in parents to listen to the child emitted event.

  1. Parent Component

     import {Component} from '@angular/core'


  @Component({
    selector:'parent-component',
    templateUrl:`<child-component [(value)]="val"> </child-component>        
                <span> {{ val }}  </span>`,
    styles:[]
  })


  class ParentComponent {
    public val:string = ""; 
  }

  1. Child component

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

  @Component({
    selector:'child-component',
    templateUrl:`<input type="text" [value]="value" (input)="updateChange($event.target.value)"/>`,
    styles:[]
  })

  class ChildComponent{

    @Input() value:string;
    //The change suffix is most important in @output function 
    @Output() valueChange:EventEmitter<string> = new EventEmitter<string>()

     updateChange(value){
        this.value = value
        this.valueChange.emit(value)
      }
  }
Kumar Subedi
  • 334
  • 3
  • 8
  • the child doesn't need to emit anything. lets say parent sends value to child and then parent value is updated. but the child doesn't have new data. child has old data only. that was the question. How does the child gets updated data from parent. – Sridhar Natuva Sep 01 '20 at 18:21