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