Sharing Data in Angular Components

By | | Updated : 2018-01-13 | Viewed : 622 times

Sharing-Data-in-Angular-Components

In Angular application, Components should share the data one to another to execute the logic. So Angular has provided four type of options to share data one Component to another component.

Decorators in Angular 2

Decorators will modify the definition of Class/Class Members. This modification will be done according the decorator logic in runtime. We have four types of Decorators are in TypeScript.

Class Decorator: The Class Decorator will be used for modifying the definition of Class constructor in run time.

Method Decorator: The Method Decorator will be used for modifying the method in run time.

Access decorator: The Access decorator will be used for modifying the definition of the accessor in run time.

Parameter decorator: The Parameter decorator will be used for modifying the parameter in run time.

Sharing data Parent to child with @Input

Here we are passing the vendor name to product component. Please find the below given code for the same.

venders.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-venders',
  templateUrl: './venders.component.html',
  styleUrls: ['./venders.component.css']
})
export class VendersComponent implements OnInit {
  vendorName = "Google"
  constructor() { }

  ngOnInit() {
  }

}
products.component.ts
import { Component, OnInit , Input} from '@angular/core';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  @Input() productVendor: string;
  constructor() { }

  ngOnInit() {
  }
}

Please see below given html for Vendors component and products.component.

venders.component.html
<app-products [productVendor]="vendorName"></app-products>
products.component.html
 <h2>Angular is maintaied by <span style="color:#00fff3;">{{ productVendor }}<span><h2>

Here we are simply passed the value vendor Name “Google” from Vendors to Products component. The logic flow will be executed as explained below.

    Execution flow:

  • In execution of app.component.html the tag <app-venders> will be interpreted. So Angular will create instance for component vendors.component.

  • In the component vendors.component, The variable vendorName will get assigned with value "Google".

  • The value in vendorName, will be reinitialized into productVendor variable by using property binding in the template of venders.component.html

  • @Input, is a parameter decorator, in component product.component, will be used for fetching the value from the vendor.component.html template. The value will be displayed in the products.component.html template. So the value of vedorName of component vendors.component will be passed to the component products.component

Sharing data Child to Parent with @Output & @EventEmitter

Here we are using @Output and EventEmitter. Here we are also passing productVendor from ProductsComponent to VendersComponent.

venders.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-venders',
  templateUrl: './venders.component.html',
  styleUrls: ['./venders.component.css']
})
export class VendersComponent implements OnInit {

  constructor() { }
  ngOnInit() { }
  vendorName:string;

  receiveVendorName($event) {
    this.vendorName = $event
  }

}
products.component.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {

  constructor() { }

  ngOnInit() { }
  productVendor: string = "Google Inc";

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

  ShowVendor() {
    this.messageEvent.emit(this.productVendor)
  }

}

Please see below given html for Vendors component and products.component.

venders.component.html
<div>
	<div style="bolder:red solid 1px;float:left;"><h1>Angular2 is maintained by: <span style="color:#00fff3;">{{vendorName}}</span></h1>
		<app-products (messageEvent)="receiveVendorName($event)"></app-products>
	</div>
</div>
products.component.html
<div style="bolder:red solid 1px;clear: left; ">
	<button (click)="ShowVendor()" style="color: black;background-color: #00fff3;font-size: 16px;border-radius: 4px 4px 4px 4px;">Show Vendor</button>
</div>

    Execution flow:

  • In execution of app.component.html the tag <app-venders> will be interpreted. So Angular will create instance for component vendors.component.

  • In the VendersComponent, receiveVendorName() method will revcieve the event proerpty.

  • After encountering the <app-products> tag in the venders.component.html, the ProductsComponent will be initialized. In the component ProductsComponent, messageEvent is an @Output() decarator. When we click the button showVendor, event will be triggered. By using @Output(), the property can be exposed to the other component VendersComponent

  • The exposed value will be bind by the parent component VendersComponent and will be populated the same in the UI client browser.

Sharing data Child to Parent with @ViewChild

To pass one component's data into another component we can use the @ViewChild decorator. Please see the below given example that will show how to send Products data into Vendors component.

vendors.component.ts
import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { ProductsComponent } from '../products/products.component';


@Component({
  selector: 'app-vendors',
  templateUrl: './vendors.component.html',
  styleUrls: ['./vendors.component.css']
})
export class VendorsComponent implements AfterViewInit {

  constructor() { }
  
  vendorName:string;
  
  @ViewChild(ProductsComponent)
  private productsComponent: ProductsComponent;
  
  ngOnInit() {
	this.vendorName =  this.productsComponent.productVendor
  }
  /*ngAfterViewInit() {
    this.vendorName =  this.productsComponent.productVendor
  }*/

}
vendors.component.html
<h2>Angular is maintaied by <span style="color:#00fff3;">{{ vendorName }}<span><h2>
<app-products></app-products>
products.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  productVendor='Google';

}

    Execution flow:

  • The Angular will create the instance for component vendors.component when encounter the tag <app-venders> in index.html.

  • VendorsComponent has @Viewchild will be used to inject child component into parent component i.e., VendorsComponent.

  • After loading the parent component view VendorsComponent view then @ViewChild will enable VendorsComponent to fetch the child component data i.e., ProductsComponent.

  • If you observe the productVendor variable will be passed form child component ProductsComponent to parent component VendorsComponent.

We will discuss the about the Sharing data using with services in the later chapters.

Leave A Reply