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

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

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.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

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.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}