10 minutes read

Property binding in Angular

Summary:Property binding is one of the most common problems for Angular beginners. This post explains the concept in detail and optimized for beginners to understand with examples.

In angular everything is built and organized in the form of components which greatly increases the code re-usability.

With the component-driven approach, we can define the parent-child hierarchy of components. For example, suppose we are making a shopping list component for an e-commerce website then it will have items in the list.

So, we can make one list component followed by the item component. Thus, the hierarchy will be shopping-list(parent)->shopping-list-item(child).

Now we know about the parent-child relationship between components. Let's have a look at how the attributes of different components can be shared within each other.

So let’s start by making a shopping list component

ng g c shopping-list


Now create a shopping-list-item component

ng g c shopping-list/shopping-list-item


Add some properties in shopping-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Ingredient } from '../shared/ingredient.model';

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit {

  ingredients:Ingredient[]=[
    new Ingredient('Apples',5),
    new Ingredient('Tomatoes',10)
  ];
  constructor() { }

  ngOnInit(): void {
  }

  onIngAdded(ingredient : Ingredient)
  {

    this.ingredients.push(ingredient);

  }

}


Give design to list component in shopping-list.component.html

<div class="row">
    <div class="col-xs-10">
        <app-shopping-list-item *ngFor="let ingredientElement of ingredients" ></app-shopping-list-item>
    </div>
</div>


Add ingredient property in shopping-list-item.ts and annotate it with @Input()

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Ingredient } from '../../Ingredient.model';

@Component({
  selector: 'app-shopping-list-item',
  templateUrl: './shopping-list-item.component.html',
  styleUrls: ['./shopping-list-item.component.css']
})
export class ShoppingListItemComponent implements OnInit {

  @Input()ingredient : Ingredient;

  constructor() { }

  ngOnInit(): void {
  }

}

The @input() is a decorator from @angular/core package which supplies data from parent component to child component.

Here, we are using it to supply the ingredient details in the shopping-list component to the shopping-list-item component.

Now, since we have defined the ingredient property in shopping-list-item we can assign its value to shopping-list.component.html

<div class="row">
    <div class="col-xs-10">
        <app-shopping-list-item *ngFor="let ingredientElement of ingredients" [ingredient]="ingredientElement"></app-shopping-list-item>
    </div>
</div>


Finally, give design to shopping-list-item.component.html and add ingredient properties which we have defined in shopping-list-item.component.ts

<a href="#" style="cursor: pointer;" class="list-group-item">
            {{ingredient.name}} ({{ingredient.amount}})
            </a>

.