ANGULAR: Data Binding 💾📎

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