python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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!!

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions