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

Demo on Stackblitz

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.