Angular 2 – Two Ways to Pass Data to Components

This article represents concepts and code samples in relation to how one could pass data from one component to another in an Angular app. Please feel free to comment/suggest if I missed mentioning one or more important points. Also, sorry for the typos.




As Angular is primarily based on components and components interaction, it is important to understand how data is passed from one component to another. Data is passed between the component using property bindings. Take a look at the syntax below:

<user [value]="user"></user>

In above syntax, user component’s property “value” is bound to “user” property of the parent component. The data type of the bound property needs to be matched. Thus, if the “value” is an object, the “user” property of parent component also needs to be an object. To achieve the contractual requirement, one could take define a user “interface” and then create a property of interface type for consistency. Following is sample code for the user interface. The code below could be saved in a separate file such as user.ts and the interface could be imported in different component appropriately.

export interface User {
 id: number,
 name: string,
 email: string,
 address: string,
 age: number
}

Following are two different syntax that could be used in the Child component for it to receive the input from the parent component.

Usage of @Input Decorator

@Input decorator is used to define the property which receives the data from parent property. In other words, the @Input decorator adds metadata to the class that makes the “value” property, in the code below, available for property binding under the “value” alias. Take a look at the User component below and usage of @Input decorator.

import {Component, View} from 'angular2/core';
import {User} from './user';

@Component({
  selector: 'user',
})
@View({
  template: '{{value.name}}'
})
export class UserComponent {
  @Input('value') value: User;
}

Usage of inputs Array

Another way is to use “inputs” array in the @Component metadata. Take a look at the following code:

import {Component, View} from 'angular2/core';
import {User} from './user';

@Component({
  selector: 'user',
  inputs: ['value']
})
@View({
  template: '{{value.name}}'
})
export class UserComponent {
  value: User;
}
Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

View Comments

Share
Published by
Ajitesh Kumar

Recent Posts

Large Language Models (LLMs): Four Critical Modeling Stages

Large language models (LLMs) have fundamentally transformed our digital landscape, powering everything from chatbots and…

4 days ago

Agentic Workflow Design Patterns Explained with Examples

As Large Language Models (LLMs) evolve into autonomous agents, understanding agentic workflow design patterns has…

5 days ago

What is Data Strategy?

In today's data-driven business landscape, organizations are constantly seeking ways to harness the power of…

6 days ago

Mathematics Topics for Machine Learning Beginners

In this blog, you would get to know the essential mathematical topics you need to…

1 month ago

Questions to Ask When Thinking Like a Product Leader

This blog represents a list of questions you can ask when thinking like a product…

1 month ago

Three Approaches to Creating AI Agents: Code Examples

AI agents are autonomous systems combining three core components: a reasoning engine (powered by LLM),…

1 month ago