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.
user.model.ts
export class User {
name : string;
age : number;
joinDate : Date;
constructor(name: string, age : number, joinDate : Date) {
this.name = name;
this.age = age;
this.joinDate = joinDate;
}
}
app.component.ts (Parent component)
import {Component} from '@angular/core';
import { User } from './user/user.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
users: User[];
constructor(){
//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.
app.component.html
<div class="container">
<h3>User Details</h3>
<app-user *ngFor="let user of users"
[usr]="user">
</app-user>
</div>
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';
@Component({
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.
User.component.html
In the template user data is displayed using string interpolation.
<div class="row">
<div class="col-xs-6">
<label>Name: </label> {{ usr.name }}
<label>Age: </label> {{ usr.age }}
<label>Join Date: </label> {{ usr.joinDate | date:'dd/MM/yyyy' }}
</div>
</div>
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
You may also like-