Angular: Component Data Transfer

Scenario : Let say you want to populate the dropdown on component 2 when there is a change in value of dropdown present in component 1 

==============================================================================

First of all we have to check the relation between different components

1. Parent (component 1) > Child (Component 2) - Sharing data via @input

2. Child (component 1) > Parent (Component 2) -Sharing Data via Output() and EventEmitter

3. Siblings with common parent. Child 1(component 1) > Child 2 (Component 2) -- use of both @output and @input together

4. Totally unrelated components  -- Sharing data with service, Sharing data with Route, NgRX

https://stackoverflow.com/questions/37587732/how-to-call-another-components-function-in-angular2

==============================================================================

1. Parent > Child 

Sharing data via @input decorator. 

parent.component.ts

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

@Component({

  selector: 'parent-component',

  template: `

    <child-component [childProperty]="parentProperty"></child-component>

  `,

  styleUrls: ['./parent.component.css']

})

export class ParentComponent{

  parentProperty = "I come from parent"

  constructor() { }

}

child.component.ts

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

@Component({

  selector: 'child-component',

  template: `

      Hi {{ childProperty }}

  `,

  styleUrls: ['./child.component.css']

})

export class ChildComponent {

  @Input() childProperty: string;

  constructor() { }

}

==============================================================================

2. Child > Parent

Sharing Data via Output() and EventEmitter

parent.component.ts

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

@Component({

  selector: 'parent-component',

  template: `

    Message: {{message}}

    <child-component (messageEvent)="receiveMessage($event)"></child-component>

  `,

  styleUrls: ['./parent.component.css']

})

export class ParentComponent {

  constructor() { }

  message:string;

  receiveMessage($event) {

    this.message = $event

  }

}

 

child.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({

  selector: 'child-component',

  template: `

      <button (click)="sendMessage()">Send Message</button>

  `,

  styleUrls: ['./child.component.css']

})

export class ChildComponent {

  message: string = "Hello!"

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { }

  sendMessage() {

    this.messageEvent.emit(this.message)

  }

}

==============================================================================

3. Siblings with common parent. Child 1(component 1) > Child 2 (Component 2)

parent.component.ts

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

@Component({

  selector: 'parent-component',

  template: `

    Message: {{message}}

    <child-one-component (messageEvent)="receiveMessage($event)"></child1-component>

    <child-two-component [childMessage]="message"></child2-component>

  `,

  styleUrls: ['./parent.component.css']

})

export class ParentComponent {

  constructor() { }

  message: string;

  receiveMessage($event) {

    this.message = $event

  }

}

child-one.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({

  selector: 'child-one-component',

  template: `

      <button (click)="sendMessage()">Send Message</button>

  `,

  styleUrls: ['./child-one.component.css']

})

export class ChildOneComponent {

  message: string = "Hello!"

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { }

  sendMessage() {

    this.messageEvent.emit(this.message)

  }

}

child-two.component.ts

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

@Component({

  selector: 'child-two-component',

  template: `

       {{ message }}

  `,

  styleUrls: ['./child-two.component.css']

})

export class ChildTwoComponent {

  @Input() childMessage: string;

  constructor() { }

}

==============================================================================

4. Totally unrelated components

Sharing Data with a Service

When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should be using a shared service. When you have data that should always be in sync, I find the RxJS BehaviorSubject very useful in this situation.

data.service.ts

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

import { BehaviorSubject } from 'rxjs';

@Injectable()

export class DataService {

  private messageSource = new BehaviorSubject('default message');

  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {

    this.messageSource.next(message)

  }

}

 

first.component.ts

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

import { DataService } from "../data.service";

@Component({

  selector: 'first-componennt',

  template: `

    {{message}}

  `,

  styleUrls: ['./first.component.css']

})

export class FirstComponent implements OnInit {

  message:string;

  constructor(private data: DataService) {

      // The approach in Angular 6 is to declare in constructor

      this.data.currentMessage.subscribe(message => this.message = message);

  }

  ngOnInit() {

    this.data.currentMessage.subscribe(message => this.message = message)

  }

}

 

second.component.ts

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

import { DataService } from "../data.service";

@Component({

  selector: 'second-component',

  template: `

    {{message}}

    <button (click)="newMessage()">New Message</button>

  `,

  styleUrls: ['./second.component.css']

})

export class SecondComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {

    this.data.currentMessage.subscribe(message => this.message = message)

  }

  newMessage() {

    this.data.changeMessage("Hello from Second Component")

  }

}

==============================================================================