3 Different Ways to Use Input Decorator
Tags: angular
Published: 2019-09-07 20:54:53

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`
```ts
@Input() message: string;
```

`child-one.component.html`
```ts
<p>{{ message }}</p>
```

`parent.component.html`
```html
<child-one message="hi there"></child-one>
```

Output:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2gc718u6kmo0a0wsw1y1.png)

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`
```ts
@Input('msg') message: string;
```

`child-two.component.html`
```ts
<p>{{ message }}</p> <!-- still uses `message` -->
```

`parent.component.html`
```html
<child-two msg="hi there"></child-two> <!-- use alias 'msg' -->
```

Output:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2gc718u6kmo0a0wsw1y1.png)

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`
```ts
@Input() message: string;

ngOnInit() {
  this.message = this.message && this.message.toUpperCase();
}
```

or, another approach is using `uppercase` pipe

`child.component.ts`
```ts
@Input() message: string;
```

`child.component.html`
```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`
```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`
```ts
<p>{{ message }}</p>
```

`parent.component.html`
```html
<child-three message="hi there"></child-three>
```

Output

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4n84ywxr58s04xphbfnq.png)

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`
```ts
@Input('msg') // give alias
set message(inputMessage: string) {
  this._message = inputMessage && inputMessage.toUpperCase(); // uppercase message here
}
```

`parent.component.html`
```html
<child-three msg="hi there"></child-three> <!-- use alias 'msg' -->
```
# Demo
[Demo on Stackblitz](https://stackblitz.com/edit/2019-09-07-input-decorator)

# 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.