Angular 2 Input Properties


Notice: A non well formed numeric value encountered in /home/ghadeerr/public_html/ghadeer.io/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

In order for components that we write to be useful in our applications they need to be initialized with data (either from the user or a server). For example, if we were going to create a favorite component we need to pass in the current state of the item (whether it has or has not been favorited)

We do this with the @Input decorator. The @Input decorator allows us to pass a value to our component using property binding ([nameOfField]). You can think of fields with the @Input decorator is part of the “public api” of our component.

Let’s begin writing our favorite component.

How do we pass in a value to initialize the state of this component? To do this we decorate our component with @Input.

In order to set this flag we use property binding.

There is another way to declare input fields, we can write the input definitions in the component metadata itself.

Pros: Anybody can understand what the component inputs are without looking at the component definition.
Cons: If we decide to change the name of our input field, we will need to refactor our definition and FavoriteComponent property.

For this reason, I┬áprefer to use the less fragile @Inputand declare all @Input‘s at the top of the component for documentation purposes.

Alias’ing with Input

It is possible to alias our input so that it is not tied to the name of the actual variable, we can do so like this

For those who prefer to put the input definitions in the @Component declaration, we can write our component like this

We now have the ability to initialize the component with the correct state.

Let’s begin fleshing our favorite component out a bit. We are going to use a button to handle toggling the state of the our favorite component and to listen to events.

Our template

Our component will capture clicks by calling the toggle function. In Angular 2, we bind to the direct DOM properties of our elements. Although this is a bit difficult to get used to, it’s great because there is less angular “magic”.

Below, we are saying that the Button Text (DOM property of textContent) will show the text that is in our component field: favoriteText

Here is our component

When the user clicks the button, we toggle the state of our favorite property and then update the button text.

There is one interesting thing I want to point out about our component. If you run the code, our isFavorite variable will print a value of “bootstrapped value is: undefined” and the button text will have the wrong state.

Why does this happen? Because angular has not yet bootstrapped and decorated our component properly. All of the values that we are injecting into the component are not yet initialized.

How do we get around this? We subscribe to one of Angular 2’s lifecyle events: ngOnInit

Angular 2 will now call the ngOnInit function when the component has bootstrapped. For sake of completeness, our Favorite component now looks like this

This component works great, it shows the right state when favorited. But it does not yet let consumers to the component to subscribe to changes to the favorite state. In the next example, we are going to extend our favorite component to allow it to emit events which will allow consumers to act on changes to favorites using the @Output decorator.

If you enjoyed this article, enter your email below to get free updates!