Share data between components using ViewChild - Angular 2+

Angular 4ViewChildShare data

In this article we will discussing about sharing data between different components using ViewChild. There are many ways to share data between components, ViewChild is one among them. Let us check with some examples. Here I am going to create two components, HomeComponent and DashboardComponent.

HomeComponent

import { Component } from '@angular/core';
import { DashboardComponent } from './dashboard.component'

@Component({
    selector: 'home',
    template: '<div><button (click)="shareData();">Share data</button>'
        + '<dashboard></dashboard>'
        + '</div>'
})

export class HomeComponent {

    constructor() { }
    shareData() {

    }
}

DashboardComponent

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

@Component({
    selector: 'dashboard',
    template: '<div>Dashboard</div>'
})

export class DashboardComponent {
    constructor() { }
    sendData(data: any[]) {

    }
}

We have created two simple components. Now write a logic to access sendData() method from HomeComponent. Check updated HomeComponent code.

Updated HomeComponent

import { Component, ViewChild } from '@angular/core';
import { DashboardComponent } from './dashboard.component'

@Component({
    selector: 'home',
    template: '<div><button (click)="shareData();">Share data</button>'
        + '<dashboard></dashboard>'
        + '</div>'
})

export class HomeComponent {
    constructor() { }

    @ViewChild(DashboardComponent) DashboardComponent: DashboardComponent;
    shareData() {
        this.DashboardComponent.sendData();
    }
}

Similar way you can share an array or object, check below code for that.

import { Component, ViewChild } from '@angular/core';
import { DashboardComponent } from './dashboard.component'


@Component({
    selector: 'home',
    template: '<div><button (click)="shareData();">Share data</button>'
        + '<dashboard></dashboard>'
        + '</div>'
})

export class HomeComponent {

    _data: any[];
    constructor() {
        this._data = ['prashobh', 'angular', 'developer'];
    }

    @ViewChild(DashboardComponent) DashboardComponent: DashboardComponent;
    shareData() {
        this.DashboardComponent.sendData(this._data);
    }
}

Updated DashboardComponent to receive data

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

@Component({
    selector: 'dashboard',
    template: '<div>Dashboard</div>'
})

export class DashboardComponent {
    constructor() { }
    sendData(data: any[]) {
        console.log('I am from home component');
        console.log(data);
    }
}

We are done. In this article we have discussed about sharing data from component to another component using ViewChild.

Angular 4ViewChildShare data

Related Info

1. Create reusable component and pass data to component.

2. Share data between components using service file.

3. How to communicate between a component and a service file.

4. Share data between parent and child component.

5. 3 simple ways to share data through angular route.