Return to site

ANGULAR TIP: Input decorator

ยท fullstack

๐ƒ๐ž๐Ÿ๐ข๐ง๐ข๐ญ๐ข๐จ๐ง

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.

 

๐’๐ง๐ข๐ฉ๐ฉ๐ž๐ญ

To define an input for a component, use the @๐ˆ๐ง๐ฉ๐ฎ๐ญ ย decorator.

For example if one component needs a user argument to render information about that user:

๐Ÿ‘‰ add an @๐ˆ๐ง๐ฉ๐ฎ๐ญ binding to user:๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡

๐Ÿญ. ๐—–๐—ผ๐—บ๐—ฝ๐—ผ๐—ป๐—ฒ๐—ป๐˜'๐˜€ ๐—ฐ๐—ผ๐—ป๐˜๐—ฟ๐—ผ๐—น๐—น๐—ฒ๐—ฟโฌ‡๏ธโฌ‡๏ธโฌ‡๏ธ

ย ๐Ÿฎ. ๐—ฃ๐—ฎ๐—ฟ๐—ฒ๐—ป๐˜ ๐—ฐ๐—ผ๐—บ๐—ฝ๐—ผ๐—ป๐—ฒ๐—ป๐˜'๐˜€ ๐˜๐—ฒ๐—บ๐—ฝ๐—น๐—ฎ๐˜๐—ฒโฌ‡๏ธโฌ‡๏ธโฌ‡๏ธ