Return to site

ANGULAR: Data Binding ๐Ÿ’พ๐Ÿ“Ž

ยท ngInterview,fullstack

Data binding is the process that establishes a connection between the application UI and business logic. Basically, it acts as a bridge between UI (View) and the business logic (View Model) for the application.

Business logic โš™๏ธ โฌ…๏ธ Data Binding โžก๏ธ View ๐Ÿ–ผ๏ธ

On the basis of data direction (i.e. movement of data), binding is divided into three parts:

 

1๏ธโƒฃ ๐’๐จ๐ฎ๐ซ๐œ๐ž ๐ญ๐จ ๐•๐ข๐ž๐ฐ

app.component.ts โžก๏ธ app.component.html

Snippet:

โš™๏ธapp.component.ts๐Ÿ‘‡

๐Ÿ–ผ๏ธapp.component.html๐Ÿ‘‡

๐Ÿ‘‰ ๐‘‡โ„Ž๐‘’ ๐‘ฃ๐‘Ž๐‘™๐‘ข๐‘’ '๐‘–๐‘ ๐ท๐‘–๐‘ ๐‘Ž๐‘๐‘™๐‘’๐‘‘' ๐‘–๐‘  ๐‘Ÿ๐‘’๐‘Ž๐‘‘ ๐‘–๐‘› ๐‘กโ„Ž๐‘’ ๐‘๐‘œ๐‘›๐‘ก๐‘Ÿ๐‘œ๐‘™๐‘™๐‘’๐‘Ÿ(โš™๏ธ), ๐‘Ž๐‘›๐‘‘ ๐‘–๐‘ก ๐‘Ž๐‘๐‘ก๐‘–๐‘ฃ๐‘Ž๐‘ก๐‘’๐‘  ๐‘กโ„Ž๐‘’ ๐‘›๐‘”๐ผ๐‘“ ๐‘คโ„Ž๐‘–๐‘โ„Ž ๐‘™๐‘’๐‘ก๐‘  ๐‘‘๐‘–๐‘ ๐‘๐‘™๐‘Ž๐‘ฆ ๐‘กโ„Ž๐‘’ "โ„Ž๐‘’๐‘™๐‘™๐‘œ" ๐‘ก๐‘’๐‘ฅ๐‘ก ๐‘–๐‘› ๐‘กโ„Ž๐‘’ ๐‘ก๐‘’๐‘š๐‘๐‘™๐‘Ž๐‘ก๐‘’ (๐Ÿ–ผ๏ธ).

 

 

 

2๏ธโƒฃ ๐•๐ข๐ž๐ฐ ๐ญ๐จ ๐’๐จ๐ฎ๐ซ๐œ๐ž

app.component.html โžก๏ธ app.component.ts

Snippet:

๐Ÿ–ผ๏ธapp.component.html๐Ÿ‘‡

โš™๏ธapp.component.ts๐Ÿ‘‡

๐Ÿ‘‰ ๐ด ๐‘๐‘™๐‘–๐‘๐‘˜ ๐‘œ๐‘› ๐‘กโ„Ž๐‘’ ๐‘๐‘ข๐‘ก๐‘ก๐‘œ๐‘› ๐‘–๐‘› ๐‘กโ„Ž๐‘’ ๐‘ก๐‘’๐‘š๐‘๐‘™๐‘Ž๐‘ก๐‘’ (๐Ÿ–ผ๏ธ) ๐‘Ž๐‘๐‘ก๐‘–๐‘ฃ๐‘Ž๐‘ก๐‘’๐‘  ๐‘กโ„Ž๐‘’ (๐‘๐‘™๐‘–๐‘๐‘˜) ๐‘คโ„Ž๐‘–๐‘โ„Ž ๐‘๐‘Ž๐‘™๐‘™๐‘  '๐‘š๐‘ฆ๐‘“๐‘ข๐‘›๐‘' ๐‘“๐‘ข๐‘›๐‘๐‘ก๐‘–๐‘œ๐‘›, ๐‘กโ„Ž๐‘–๐‘  ๐‘œ๐‘›๐‘’ ๐‘‘๐‘œ๐‘’๐‘  ๐‘–๐‘ก๐‘  ๐‘๐‘ข๐‘ ๐‘–๐‘›๐‘’๐‘ ๐‘  ๐‘–๐‘› ๐‘กโ„Ž๐‘’ ๐‘๐‘œ๐‘›๐‘ก๐‘Ÿ๐‘œ๐‘™๐‘™๐‘’๐‘Ÿ (โš™๏ธ) ๐‘๐‘ฆ ๐‘™๐‘Ž๐‘ข๐‘›๐‘โ„Ž๐‘–๐‘›๐‘” ๐‘Ž ๐‘๐‘œ๐‘๐‘ข๐‘ ๐‘ค๐‘–๐‘กโ„Ž "โ„Ž๐‘’๐‘™๐‘™๐‘œ" ๐‘ก๐‘’๐‘ฅ๐‘ก.

 

 

 

3๏ธโƒฃ ๐ญ๐ฐ๐จ-๐ฐ๐š๐ฒ ๐›๐ข๐ง๐๐ข๐ง๐ 

app.component.html ๐Ÿ”ƒ๏ธ app.component.ts

Snippet:

๐Ÿ–ผ๏ธapp.component.html๐Ÿ‘‡

โš™๏ธapp.component.ts๐Ÿ‘‡

๐Ÿ‘‰ ๐‘‡โ„Ž๐‘’ ๐‘ข๐‘ ๐‘’๐‘Ÿ๐‘๐‘Ž๐‘š๐‘’ ๐‘–๐‘  ๐‘ก๐‘ค๐‘œ-๐‘ค๐‘Ž๐‘ฆ๐‘  ๐‘๐‘œ๐‘ข๐‘›๐‘‘ ๐‘ค๐‘–๐‘กโ„Ž ๐‘›๐‘”๐‘€๐‘œ๐‘‘๐‘’๐‘™ ๐‘ก๐‘Ž๐‘”, ๐‘Ž๐‘ก ๐‘™๐‘œ๐‘Ž๐‘‘๐‘–๐‘›๐‘” ๐‘–๐‘ก ๐‘ ๐‘’๐‘ก๐‘  ๐‘ข๐‘ ๐‘’๐‘Ÿ๐‘›๐‘Ž๐‘š๐‘’ ๐‘“๐‘Ÿ๐‘œ๐‘š ๐‘กโ„Ž๐‘’ ๐‘ฃ๐‘Ž๐‘™๐‘ข๐‘’ '๐‘‰๐‘–๐‘›๐‘›๐‘ฆ' ๐‘–๐‘› ๐‘กโ„Ž๐‘’ ๐‘๐‘œ๐‘›๐‘ก๐‘Ÿ๐‘œ๐‘™๐‘™๐‘’๐‘Ÿ (โš™๏ธ), ๐‘๐‘ข๐‘ก ๐‘กโ„Ž๐‘’๐‘› ๐‘–๐‘“ ๐‘กโ„Ž๐‘’ ๐‘ฃ๐‘Ž๐‘™๐‘ข๐‘’ ๐‘œ๐‘“ ๐‘กโ„Ž๐‘’ ๐‘–๐‘›๐‘๐‘ข๐‘ก ๐‘–๐‘  ๐‘š๐‘œ๐‘‘๐‘–๐‘“๐‘–๐‘’๐‘‘ ๐‘–๐‘› ๐‘กโ„Ž๐‘’ ๐‘ก๐‘’๐‘š๐‘๐‘™๐‘Ž๐‘ก๐‘’ (๐Ÿ–ผ๏ธ) ๐‘–๐‘ก ๐‘–๐‘  ๐‘–๐‘š๐‘๐‘Ž๐‘๐‘ก๐‘’๐‘‘ ๐‘๐‘œ๐‘กโ„Ž ๐‘–๐‘› ๐‘๐‘œ๐‘›๐‘ก๐‘Ÿ๐‘œ๐‘™๐‘™๐‘’๐‘Ÿ ๐‘Ž๐‘›๐‘‘ ๐‘ก๐‘’๐‘š๐‘๐‘™๐‘Ž๐‘ก๐‘’.

 

 

#angular #dataBinding #til