0

Angular – Pass Data from One Component to Another

This post briefly demonstrates how to pass data from one component to another component in Angular.

Requirements

  • Angular CLI 7.3.9
  • NPM 6.4.1
  • Node v8.11.3
  • Internet connection

Create a new Component

This part assumes that we have an existing fresh application generated via

To create a new component, use:

Add Property to ChildComponent class

We need a new property to store any value from the app (parent) component.

The property childDetails has to be decorated with @Input(‘parameterChildDetails’). The ‘parameterChildDetails‘ is how ‘childDetails‘ is referred to or known outside of the component.

Pass Value from Parent Component

In app.component.html, we pass values as follow:

Testing

The page looks like this:

Download the Files

https://github.com/Turreta/Angular-Pass-Data-from-One-Component-to-Another

Karl San Gabriel

Karl San Gabriel

Java and Enterprise Technologies Expert