Passing Parameters to an Angular2 Component

One of the greatest advantages of using components is reusability, which means once you’ve create your component you can use it in several places across your project without having to recreate it everytime. But for that to be possible we have to be able to pass parameters to our components, that’s what I’ll be showing you in this tutorial.

Some time ago I’ve written a tutorial on how to create an autocomplete, but I didn’t show how to pass the data as a parameter, it was hardcoded in the component, so if I had to use it somewhere else with other data I would have to rewrite everything. Of course nobody wants that, so let’s see how we can make it better.

This is the component we have so far (I’ve omitted some code to make it easier to read):

import {Component, ElementRef, Input} from 'angular2/core';
 
@Component({
    selector: 'autocomplete',
    template: `
        //template here
    	`
})
export class AutocompleteComponent {
    public countries = [ "Albania","Andorra","Armenia","Austria","Azerbaijan","Belarus","Belgium","Bosnia & Herzegovina",
                        "Bulgaria","Croatia","Cyprus","Czech Republic","Denmark","Estonia","Finland","France","Georgia",
                        "Germany","Greece","Hungary","Iceland","Ireland","Italy","Kosovo","Latvia","Liechtenstein",
                        "Lithuania","Luxembourg","Macedonia","Malta","Moldova","Monaco","Montenegro","Netherlands",
                        "Norway","Poland","Portugal","Romania","Russia","San Marino","Serbia","Slovakia",
                        "Slovenia","Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];
    ...
}

What we have to do here is to remove this array of countries and replace it with a variable annotated with the @Input decorator from angular2/core. After the modification the component should look like this:

export class AutocompleteComponent {
    @Input() data;
    ...
}

The @Input() decorator makes the data variable a data-bound property, now this variable can receive data passed from a parent component.

Now let’s create a parent component that uses our autocomplete:

import {Component} from 'angular2/core';
import {AutocompleteComponent} from './autocomplete.component';
 
@Component({
    selector: 'my-app',
    directives:[AutocompleteComponent]
    template: `
            <autocomplete [data]=countries ></autocomplete>
    	`
})
export class AppComponent {
    public countries = [ "Albania","Andorra","Armenia","Austria","Azerbaijan","Belarus","Belgium","Bosnia & Herzegovina",
                        "Bulgaria","Croatia","Cyprus","Czech Republic","Denmark","Estonia","Finland","France","Georgia",
                        "Germany","Greece","Hungary","Iceland","Ireland","Italy","Kosovo","Latvia","Liechtenstein",
                        "Lithuania","Luxembourg","Macedonia","Malta","Moldova","Monaco","Montenegro","Netherlands",
                        "Norway","Poland","Portugal","Romania","Russia","San Marino","Serbia","Slovakia",
                        "Slovenia","Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];
 
}

As you can see, I’ve just copied the data from the other component to this one. If you take a look at the autocomplete in the template you’ll see that it has the attribute [data]=countries, this is how I’m assigning the countries list to that variable with the @Input decorator I’ve create before. If you run your project you’ll see that it’s working the same way as before, but now you can create more autocompletes passing different datasets.

Hope this tutorial was helpful, just leave a comment if you have any doubts.

Recommended for you

Angular2 Tutorial: Developing a Realtime Chat App Angular 2 Chat Application Hi guys, today we're going to make an awesome chat application with Angular2, NodeJS and Socket.io, this tutorial will involve quite a lot of things, and there are also lots of small details, so it will be a little bit longer than usual. To easily understand and make t...
Angular2: How to Sort a JSON Dataset by Field To be able to sort an array we don't need anything specific from angular2, it can be accomplished just by using regular javascript, more specifically, we have to use the function sort() from the Array object, let's see an example: someArray.sort(function(a, b){ if ( a.someField < b.someFi...
Angular2 Tutorial: Creating Custom Pipes Angular 2 Pipes provide us a very simple way to transform/format the data displayed by our application, there are some built-in pipes we can use, but sometimes they don't meet our needs, that's when we have to create custom pipes. This will be a very quick tutorial in which I'll give you an example ...
Angular2: How to Pass Callback Functions to a Component There are lots of situations where it's useful to pass a function to an angular2 component, for instance, when our component is a dialog and we have to perform an specific task when it closes, or pass the action of one of its buttons, or even events like keypress, resize, mouseover, etc. If you're r...

One comment on “Passing Parameters to an Angular2 Component

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>