Update parent component property from child component in Angular 2

by

You need to use 2 way data-binding.

@Input() is one way data-binding.
to enable 2 way data-binding you need to add an @Output() corresponding to the property, with a “Change” suffix

@Input() getSearchStatus: boolean;
@Output() getSearchStatusChange = new EventEmitter<boolean>();

when you want to publish the change made to your property to the parent, you need to notify the parent with:

this.getSearchStatusChange.emit(newValue)

and in the parent you need to use the banana-in-a-box notation for that property:

[(getSearchStatus)]="myBoundProperty"

you can also bind to the property and trigger a callback when it changes in child:

[getSearchStatus]="myBoundProperty" (getSearchStatusChange)="myCrazyCallback($event)"

see the plnkr

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  3. Read response headers from API response – Angular 5 + TypeScript
  4. How to dynamically add a directive?
  5. Ionic 2 Form goes up when keyboard shows
  6. When to use square brackets [ ] in directives @Inputs and when not?
  7. Angular2 – Interaction between components using a service
  8. Reactive forms – disabled attribute
  9. How to implement sleep function in TypeScript?
  10. Testing error case with observables in services
  11. Build Angular2 HTML and TypeScript to a single file
  12. angular keyvalue pipe sort properties / iterate in order
  13. Angular subscribe elegant
  14. How to allow access outside localhost
  15. Angular – Make multiple HTTP calls sequentially
  16. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  17. Pass parameter into route guard
  18. Typescript dependency injection public vs private
  19. Rxjs Retry with Delay function
  20. What is the meaning of question mark in expressions in Angular 2?
  21. Merging http observables using forkjoin
  22. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  23. Enabling CORS on Azure Active Directory
  24. How to Using a FormArray in a FormGroup
  25. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  26. How to validate white spaces/empty spaces? [Angular 2]
  27. Angular2: use [(ngModel)] with [ngModelOptions]=”{standalone: true}” to link to a reference to model’s property
  28. Call a function every 10 seconds Angular2
  29. How to change angular material datepicker format
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment