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

Adding the Multiselect feature to an Angular2 Autocomplete Angular2 Multi Selection Autocomplete After I wrote the tutorial on how to create an angular2 autocomplete, lots of people have been asking me to add the multiselect feature to it, that's the reason why I decided to write this one. I'm going to continue from where I stopped, so make sure you fol...
Creating an Angular2 Datatable from Scratch PART 2: Filtering the Data Continuing from where we stopped at Part 1, today we're going to add the filter functionality to the table, but before we start let's do some styling. I'm going to use Bootstrap, but if you don't want you don't have to, feel free to style your component as you like. But if you decide to use Bootstra...
Angular 2 Tutorial: Adding HotKeys (Keyboard shortcuts) to a Component Arguably hotkeys can substantially increase the usability of an application, the less the users have to touch the mouse the better will be their experience with the application. Luckily for us there is a very easy way of defining hotkeys on angular2, which is by adding a listener to the host comp...
Angular2: Uncaught (in promise): Error: Cannot match any routes: ” If you're specifying the routes on your project for the first time you may see the following error on the console when you run it: core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''ErrorHandler.handleError @ core.umd.js:3462next @ core.umd.js:6924schedulerFn @...

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>