How to do inter communication between a master and detail component in Angular2?

by

Here’s a simple app that uses a parent <customer-browser> component with <customer-list> and <customer-detail> subcomponents.

http://plnkr.co/edit/aEjlwIKKhcErWAnIhY3C?p=preview

The browser itself simply accepts an array of customers as an input, and has an internal selectedCustomer property.

The list component accepts the same list, and exposes a “selected” property, and emits a selectedChange output event. This syntax allows two way binding, and that gets bound to the parent’s selectedCustomer property.

The detail component simply takes an customer input which is bound to the parent’s selectedCustomer property.

More Related Contents:

  1. Difference between Constructor and ngOnInit
  2. Catching errors in Angular HttpClient
  3. How to load component dynamically using component name in angular2?
  4. What are the practical differences between template-driven and reactive forms?
  5. Get Value From Select Option in Angular 4
  6. How to smooth scroll to page anchor in angular 4 without plugins properly?
  7. inject() must be called from an injection context
  8. Angular firebase email verification false after verify
  9. Angular2 router (@angular/router), how to set default route?
  10. How to correctly import operators from the `rxjs` package
  11. What is the difference between declarations, providers, and import in NgModule?
  12. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  13. Angular routerLink does not navigate to the corresponding component
  14. Default sorting in Angular Material – Sort header
  15. ng2 – Difference between ng-container and ng-template tags
  16. How to return observable from subscribe
  17. How to use pipes in Angular 5 reactive form input
  18. Syntax Error in Angular App: Unexpected token
  19. How to mock Angular 4.3 httpClient an error response in testing
  20. How to add multiple headers in Angular 5 HttpInterceptor
  21. Angular 2 creating reactive forms with nested components
  22. Angular 2 FormGroup Add Validators dynamic
  23. Angular 2 “slide in animation” of a routed component
  24. How to implement drag and drop in cypress test?
  25. How to pass results between chained observables
  26. Angular exception: Can’t bind to ‘ngForIn’ since it isn’t a known native property
  27. Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation in Angular
  28. angular cli exclude files/directory for `ng test –code-coverage`
  29. Angular2 router, get route data from url, to display breadcrumbs
  30. Share data between components using a service in Angular2

Leave a Comment