An angular component is the basic building of an Angular framework. Components in the angular form in a hierarchy structure of parent and child relationships. They can communicate and share data with each other and data can flow from parent to child or child to parent. We can use the angular @Input() decorator, to send data from parent to child as data flow downwards from higher-level components to lower-level components.
There are different approaches to sending data from parent to child component and the angular @input() decorator is among one approaches we can use. When we create a component that receives data from outside, we must explicitly tell angular to expect that data as input, using the Angular @Input decorator. You place the Angular @Input decorator next to the instance variable to which the data will be injected from outside.
Example of an Angular @input() decorator:
Let’s first create an angular project and create|add child component called the hotel component, where we pass data from its parent component.
ng new inputDecorator
ng generate component hotel
By default, all properties of the component are only accessible inside the components and not from outside of its component. To bind child properties to the parent components we need to be explicit about which properties you want to expose to the parent.
You place the Angular @Input decorator next to the instance variable to which the data will be injected from outside. When you pass data into a component from the outside, you pass that data into the component using input properties.
Edit app.component.ts file
We have added a hotels array object containing a list of the hotel name and its location. The [hotelData] is outside the property of the current component and is the name of a property in a child component. We had to assign [hotelData] a value of each iteration of the hotel’s array object of the parent component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:`
<app-hotel *ngFor="let hotel of hotels" [hotelData]="hotel"></app-hotel>` ,
styleUrls: ['./app.component.scss']
})
export class AppComponent {
hotels = [
{ name: 'Taj Palace', location: 'Delhi'},
{ name: 'Leela Place', location: 'New York'},
{ name: 'Park Hyatt ', location: 'Sydney'}
];
}Data sharing from parent to child component
By default, all properties of the component are only accessible inside the components and not from outside of its component. To bind child properties to parent components we need to be explicit about which properties you want to expose to the parent. In our example, we have only one attribute of the input decorator, but we can pass many values by using the @Input decorator as below.
// In parent component
<app-childComponent hotelName="Taj Palace" location="Delhi">
//At child componet received this value as
@Input() hotelName: string;
@Input() location: string;You place the @Input decorator next to the instance variable to which the data will be injected from outside. When you pass data into a component from the outside, you pass that data into the component using input properties. Use the @Input decorator to qualify a Component class field as an input. To use an input() decorator we need parent/child relationships among components.
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-hotel',
template: `
<div>
<strong> {{ hotel.name }} </strong>
<em>: {{ hotel.location }}</em>
</div>
`,
styleUrls: ['./hotel.component.scss']
})
export class HotelComponent {
// tslint:disable-next-line: no-input-rename
@Input('hotelData') hotel: { name: string, location: string };
constructor() { }
}Sometimes you may want the name of the input property to be different from the name of the instance variable to which it will be injected. That’s when you need to use an alias, which allows you to specify the input property name. The alias may be specified inside parentheses in the angular @Input decorator.
When you tag a component’s member variable with @Input(), you are telling Angular that the value for that variable should come from the same-name property of the associated template tag of its is in the parent component.
In the Angular @Input() decorator we don’t need to provide an argument if the name of the property of the child component is the same as corresponds to the name of the attribute in a parent component. Sometimes we may want the name of the input property to be different from the name of the instance variable to which it will be injected.
That’s when we need to use an alias name instead of the property’s owner’s name, which allows you to specify the input property name. The alias may be specified inside parentheses in the @Input decorator and in our case we use hotelData as an alias name.
Safe Navigation Operator (?.) is an Angular template binding operator, is not available in javascript, and is not the same as ? the ternary operator. When we are retrieving remote data in our case hotel data using HTTP requests and data may not be available at the time when we are passing data using @Input() properties.
As a result, we pass null data to the child component, and when the child component attempt to display data containing the null object. Which can cause Angular to throw exceptions and not display the data when it has come back from the server. We can easily solve this by using a safe navigation operator (?.) as an example {{ hotel?.name }}
We can use and implements ngOnChanges interface in our child component to check @Input decorator value states.
import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';
@Component({
selector: 'app-hotel',
templateUrl: './hotel.component.html',
styleUrls: ['./hotel.component.scss']
})
export class HotelComponent implements OnChanges {
@Input('hotelData') hotel!: { name: string, location: string };
constructor() { }
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
}
}
Decorate the setter with @Input. Notice that we used a private field in the component
class. Getter and a setter allow you to access the private field and set a value to it through
input.
For more information on component interaction in an angular check official documentation.
Related posts
- How to add an Angular signature pad?
- How to install Angular material
- How to implement CKEditor in Angular
- How to calculate base64 image size in Angular
- How to use to implement HighCharts Angular
- How to implement an Angular search filter in Angular?