Input (@Input()) is one of the most used decorators in Angular apps. It is used to pass data from the parent or host component to the child component. This decorator has a relation with DOM property in the template where the child component is used.
There are three different ways to use this decorator.
1) Plain
This is the basic way to use Input decorator.
child-one.component.ts
@Input() message: string;
child-one.component.html
<p>{{ message }}</p>
parent.component.html
<child-one message="hi there"></child-one>
Output:
We have a variable named message and we give it @Input() decorator for that variable. The DOM property in the template parent-component.html will use the same name as the variable name.
2) Alias
By using an alias, the DOM property in the template can use different name. To give alias, we can give an argument in Input decorator such as @Input('my-alias-naming'). Below is the example:
child-two.component.ts
@Input('msg') message: string;
child-two.component.html
<p>{{ message }}</p> <!-- still uses `message` -->
parent.component.html
<child-two msg="hi there"></child-two> <!-- use alias 'msg' -->
Output:
Here, we give an alias msg in Input decorator to message variable. In the child component template (child-component.html), we still refer to it as message.
HOWEVER, in the parent component template (parent-component.html), we refer to it using its alias msg.
3) Setter Getter
Using the same previous examples, consider that we want to display the message in uppercase.
This is probably the common way
child.component.ts
@Input() message: string;
ngOnInit() {
this.message = this.message && this.message.toUpperCase();
}
or, another approach is using uppercase pipe
child.component.ts
@Input() message: string;
child.component.html
<p>{{ message | uppercase }}</p> <!-- using uppercase pipe -->
Well, there's another way by using set and get from the Typescript class. They are known as auto-properties which are used to access the class variable and we can execute some logic there.
child-three.component.ts
private _message: string;
@Input() // specify Input decorator here
set message(inputMessage: string) {
this._message = inputMessage && inputMessage.toUpperCase(); // uppercase message here
}
get message(): string {
return this._message;
}
child-three.component.html
<p>{{ message }}</p>
parent.component.html
<child-three message="hi there"></child-three>
Output
As seen in the code, we define logic to uppercase the message in the set method.
Can we still give an alias using this way? Yes, we can specify alias too such as
child-three.component.ts
@Input('msg') // give alias
set message(inputMessage: string) {
this._message = inputMessage && inputMessage.toUpperCase(); // uppercase message here
}
parent.component.html
<child-three msg="hi there"></child-three> <!-- use alias 'msg' -->
Demo
Summary
Three different ways to use Input decorator. They are plain, alias and set get method. Plain way is the most basic way, the DOM property will have the same name as the variable name. The alias way gives us the flexibility to have different DOM property name. Lastly, set and get allow us to execute some logic.
Top comments (3)
Thanks Budi for sharing these tips!
Thanks dude! Really helpful and simple.
Great tips man. Thanks!