How can I communicate between two child components in angular? [duplicate]

by

Beside the solutions using the @Input/@Output and a parent component as a ‘bridge’, a common way would also be introducing a shared service. The service needs to be provided in a parent component so the children can share single instance of the service (How do I create a singleton service in Angular 2?).

Basic example using the BehaviorSubject as a delegate:

@Injectable()
export class SharedService {

    messageSource: BehaviorSubject<string> = new BehaviorSubject('');

    constructor() { }
}

Child component 1:

export class ChildComponent1 {

    constructor(private sharedService: SharedService) { }

    sendMessage(): void {
        this.sharedService.messageSource.next('Hello from child 1!');
    }
}

Child component 2:

export class ChildComponent2 {

    constructor(private sharedService: SharedService) { }

    ngOnInit(): void {
        this.sharedService.messageSource.subscribe((message) => {
            console.log('Message: ', message); // => Hello from child 1!
        });
    }
}

See also: Angular2 – Interaction between components using a service

More Related Contents:

  1. How to communicate between component in Angular?
  2. How to pass data between two components in Angular 2
  3. How to manage Angular2 “expression has changed after it was checked” exception when a component property depends on current datetime
  4. Angular – shared service between components doesn’t work
  5. Use component in itself recursively to create a tree
  6. RxJS: takeUntil() Angular component’s ngOnDestroy()
  7. How to “communicate” between components in Angular?
  8. Adding / Removing components on the fly
  9. What is the difference between component and directive?
  10. Is it necessary to unsubscribe from observables created by Http methods?
  11. How to iterate object keys using *ngFor
  12. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  13. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  14. Angular 2 Scroll to top on Route Change
  15. how to format date in Component of angular 5
  16. Hide/show individual items inside ngFor
  17. How to get angular2 [innerHtml] to work [duplicate]
  18. How to inject service into class (not component)
  19. vs
  20. Angular 2 Basic Authentication not working
  21. Property ‘json’ does not exist on type ‘Object’
  22. Update parent component property from child component in Angular 2
  23. ‘node-sass’ usage is deprecated and will be removed in a future major version
  24. Observable.of is not a function
  25. Page transition animations with Angular 2.0 router and component interface promises
  26. Inject Http manually in Angular 2
  27. Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat ‘C:\DumpStack.log.tmp
  28. Angular 6 Uncaught ReferenceError: Buffer is not defined
  29. Angular 6 Migration -.angular-cli.json to angular.json
  30. Filtering specific column in Angular Material Table with filtering in angular?

Leave a Comment