Communicate between components Angular 2

How do Components Communicate with Each Other in Angular 2?

In Angular 1, I have some ways to communicate between controllers i.e.
1.      $rootScope,
2.      $scope,
3.      $emit,
4.      $broadcast

Now In Angular 2, we have different ways to communicate between components.

A parent component and its children share a service whose interface enables bi-directional communication within the family.

The following examples for Services communication,
import {Injectable} from '@angular/core';

export class MyService {
  constructor() { }

import { Component } from '@angular/core';

  selector: 'my-app',
  templateUrl: './myApp.component.html'
export class MyAppComponent { }

The following example to calling service from any other component,
import {Component, OnInit} from '@angular/core';
import {MyService} from './app/myService'; 

  selector: '<my-component></my-component>',
  templateUrl: 'app/component.html',
  providers: [MyService]

export class MyComponent implements OnInit {
  constructor(private msInstance: MyService) {}
  ngOnInit() { 

Example for Sibling Component Communication,

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ListComponent } from './list.component';
import { DetailComponent } from './detail.component';

  selector: 'app-component',
  template: '<list-component></list-component><detail-component></detail-component>',
  directives: [ListComponent, DetailComponent]
class AppComponent implements AfterViewInit {
  @ViewChild(ListComponent) listComponent:ListComponent;
  @ViewChild(DetailComponent) detailComponent: DetailComponent;

  ngAfterViewInit() {
    // afther this point the children are set, so you can use them

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions