Wednesday, April 10, 2024

Angular Custom Property Binding Using @Input Decorator

In the post Angular Property Data Binding we saw how to bind data to a property of an element. We can also bind a custom property of an Angular component that’s what we’ll see in this post how to bind custom property in Angular using @Input decorator.

Angular custom property binding

Using custom property binding to set the model property of a custom component is a great way for parent and child components to communicate. For example following statement in the parent template shows the binding for the property "childItem" in the child component.

<app-child [childItem]=“parentItem”></app-child> 
  • Here <app-child> is the selector defined in the child component.
  • childItem is a field in the child component.
  • parentItem is a field in parent component.

By using custom property binding here, childItem is bound to the value of the parentItem. But that needs one more thing to work properly, using @Input decorator.

Using @Input decorator in custom property binding

By default any property in a component is accessible with in the component where it is defined. If you want to expose any property outside of the component then that property has to be decorated with @Input decorator.

export class UserComponent {
  @Input() usr: User;

With usr property decorated with @Input decorator, parent component can bind to this property of the child component.

@Input decorator marks a class field as an input property. The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property's value.

Angular custom property binding example

The requirement is to show user details in a child component where each user instance is passed from the parent component. Thing to notice here is that use of @Input decorator gives you a chance to break your code into separate components which promotes reusing of components. Here child component can be termed as a presentational component.

Creating a User class

Create a Type script class user.model.ts to define a User class. If you are aware of MVC (Model View Controller) pattern then this class is the Model. There are 3 fields name, age and joinDate in the User class.


export class User {
  name : string;
  age : number;
  joinDate : Date;
  constructor(name: string, age : number, joinDate : Date) { = name;
    this.age = age;
    this.joinDate  = joinDate;

app.component.ts (Parent component)

import {Component} from '@angular/core';
import { User } from './user/user.model';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  users: User[];
    //Adding User instances to users array
    this.users = [new User('Jack', 56, new Date('2005-03-25')),
    new User('Lisa', 32, new Date('2012-05-09')),
    new User('Jayesh', 28, new Date('2014-10-21'))] ;

AppComponent uses User model so that is imported. An array of type User is defined and user instances are added to that array in the Constructor.


<div class="container">
  <h3>User Details</h3>
  <app-user *ngFor="let user of users" 

In the template with in the <app-user> selector users array is iterated using ngFor directive and each user instance is bound to the usr property of the child component.

user.component.ts (Child component)

import { 
    Component, Input
 } from '@angular/core';
import { User } from './user.model';
  selector: 'app-user',
  templateUrl: './user.component.html'
export class UserComponent {
  @Input() usr!: User;

In the child component usr variable is decorated with @Input decorator indicating that parent component can bind to this property. Note that non-null assertion operator (!) is used here to suspend strict null and undefined checks for the usr property.


In the template user data is displayed using string interpolation.

<div class="row">
  <div class="col-xs-6">
    <label>Name: </label> {{ }}
    <label>Age: </label> {{ usr.age }}
    <label>Join Date: </label> {{ usr.joinDate | date:'dd/MM/yyyy' }}
Angular Custom Property Binding

That's all for this topic Angular Custom Property Binding Using @Input Decorator. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

Related Topics

  1. Angular Style Binding With Examples
  2. Angular Two-Way Data Binding With Examples
  3. Angular Custom Event Binding Using @Output Decorator
  4. Angular Custom Two-Way Data Binding
  5. How to Install Node.js and NPM in Windows

You may also like-

  1. Angular ngClass Directive With Examples
  2. Angular Cross Component Communication Using Subject Observable
  3. Setting Wild Card Route in Angular
  4. FormArray in Angular With Example
  5. Java Multithreading Interview Questions And Answers
  6. How to Sort HashSet in Java
  7. How to Convert Date And Time Between Different Time-Zones in Java
  8. Convert String to int in Python