Return to site

ANGULAR TIP: Input decorator

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

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:๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡

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

๐‘–๐‘š๐‘๐‘œ๐‘Ÿ๐‘ก { ๐ถ๐‘œ๐‘š๐‘๐‘œ๐‘›๐‘’๐‘›๐‘ก, ๐ผ๐‘›๐‘๐‘ข๐‘ก } ๐‘“๐‘Ÿ๐‘œ๐‘š '@๐‘Ž๐‘›๐‘”๐‘ข๐‘™๐‘Ž๐‘Ÿ/๐‘๐‘œ๐‘Ÿ๐‘’'; 
@๐ถ๐‘œ๐‘š๐‘๐‘œ๐‘›๐‘’๐‘›๐‘ก({ 
  ๐‘ ๐‘’๐‘™๐‘’๐‘๐‘ก๐‘œ๐‘Ÿ: '๐‘ข๐‘ ๐‘’๐‘Ÿ-๐‘๐‘Ÿ๐‘œ๐‘“๐‘–๐‘™๐‘’'
  ๐‘ก๐‘’๐‘š๐‘๐‘™๐‘Ž๐‘ก๐‘’: '{{๐‘ข๐‘ ๐‘’๐‘Ÿ.๐‘›๐‘Ž๐‘š๐‘’}}' 
}) 
๐‘’๐‘ฅ๐‘๐‘œ๐‘Ÿ๐‘ก ๐‘๐‘™๐‘Ž๐‘ ๐‘  ๐‘ˆ๐‘ ๐‘’๐‘Ÿ๐‘ƒ๐‘Ÿ๐‘œ๐‘“๐‘–๐‘™๐‘’ { 
  @๐ˆ๐ง๐ฉ๐ฎ๐ญ() ๐‘ข๐‘ ๐‘’๐‘Ÿ; 
  ๐‘๐‘œ๐‘›๐‘ ๐‘ก๐‘Ÿ๐‘ข๐‘๐‘ก๐‘œ๐‘Ÿ() {} 
}

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

<๐‘ข๐‘ ๐‘’๐‘Ÿ-๐‘๐‘Ÿ๐‘œ๐‘“๐‘–๐‘™๐‘’ ๐‘ข๐‘ ๐‘’๐‘Ÿ="bob">