Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Angular 2: Two Ways to Pass Data

DZone's Guide to

Angular 2: Two Ways to Pass Data

As Angular 2 is based on components and component interaction, it is important to understand how data is passed from one component to another. Let's check out two ways to pass data.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

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

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

In the above syntax, user component’s property value is bound to the user property of the parent component. The data type of the bound property needs to match—if value is a string, user also needs to be a string. To achieve this requirement, one could define a user interface and then create a property of that interface type for consistency. The 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 components as needed.

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

Following are two different techniques that could then 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 the 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 the 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;
    }

Both of these techniques support type conformity in Angular 2.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
javascript ,angular 2

Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}