CODEWITHSUNDEEP
angular
Sridhar Natuva
Sridhar Natuva

Reputation: 211

How to update the data between parent to child

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?

Upvotes: 3

Views: 4076

Answers (3)

Kumar Subedi
Kumar Subedi

Reputation: 354

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)
      }
  }

Upvotes: 0

Ben Racicot
Ben Racicot

Reputation: 5903

@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>

Upvotes: 6

chestas
chestas

Reputation: 124

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

Upvotes: 0

Related Questions