Angular Features (1) --- Data Binding: Data Transfer inside Component

Note: This article is published on 12/07/2024.

This series of articles will discuss the major feafures for Angular. The way to discuss could be AI in concept + Code Demo in StackBlitz | Instant Dev

• Angular Features (0) --- What is Angular
• Angular Features (1) --- Data Binding: Data Transfer inside Component  --- this article
• Angular Features (2) --- Component Interaction 
  • Angular Features (2-1) --- Component Interaction (1) by @Input/@Output

Advanced:

• Angular Features (A-1) --- Difference between Observable and Promise

Note (after writing this article):

Since the concept of data binding discussed here is with similar or same mechanizm or funcationality as view variable does in MVC module, say

• in MVC module, View Variables transfer data between Controller (code) and View, while
• in Angular, Data Binding mainly transfer data between TypyScript (code) and HTML Template.

therefore, I put the other article series of View Variables in ASP.NET MVC here as references and this article is also listed there, named as  Data Binding in Angular 

• Razor Engine in MVC
• View Variables in ASP.NET MVC 
• View Variables in ASP.NET Core MVC
• Pass Data Across Views In .NET MVC 
• Partial, RenderParial, Action, RenderAction
•  
• Data Binding in Angular --- this article

A - Introduction

Angular is a component based platform and all components make up the application. The major mechanizim for Angular is the data trasferting, either within a component or between (among) components. This article will discuss the data transfer in Angular within a component.

The content of this article:

• A - Introduction
• B - Data Binding --- from AI
• C - Angular Data Binding --- from AI
• D - Type of Data Binding
• E - Code Demo --- in Stackblitz.com

B - Data Binding --- from AI

data binding - Google Search

C - Angular Data Binding --- from AI

data binding angular - Google Search

D - Type of Data Binding

E - Code Demo --- in Stackblitz.com

You can see the vivid code from here:

• Angular dataBinding Demo - StackBlitz --- single page code

• dataBinding with Multiple Pages - StackBlitz

References:

• Angular - Binding syntax
• Angular - Understanding binding
• Angular Data Binding
• Two-way binding