Data binding allows to connect data of your Angular application with the DOM.

There are three kinds of data binding:

𝟏 𝐏𝐫𝐨𝐩𝐞𝐫𝐭𝐲 𝐛𝐢𝐧𝐝𝐢𝐧𝐠

Allows component values to be evaluated and displayed in your HTML template.

Below in the HTML thanks to brackets, ie: [src].

TS:

HTML:

𝟐 𝐄𝐯𝐞𝐧𝐭 𝐁𝐢𝐧𝐝𝐢𝐧𝐠

Allows to raise template events to the related component.

Below in the HTML thanks to parenthesis, ie: (click)

HTML:

TS:

𝟑 𝐓𝐰𝐨-𝐰𝐚𝐲 𝐁𝐢𝐧𝐝𝐢𝐧𝐠

Does both previous ones.

Component data modification are immediately repercussed on the template and same for template to component repercussions.

HTML:

𝐂𝐨𝐧𝐜𝐥𝐮𝐬𝐢𝐨𝐧:

𝐃𝐚𝐭𝐚 𝐁𝐢𝐧𝐝𝐢𝐧𝐠 𝐚𝐥𝐥𝐨𝐰𝐬 𝐭𝐨 𝐜𝐨𝐧𝐧𝐞𝐜𝐭 𝐲𝐨𝐮 𝐀𝐧𝐠𝐮𝐥𝐚𝐫 𝐚𝐩𝐩 𝐰𝐢𝐭𝐡 𝐃𝐎𝐌 𝐛𝐲 𝟑 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐦𝐚𝐧𝐧𝐞𝐫𝐬: 𝐩𝐫𝐨𝐩𝐞𝐫𝐭𝐲 𝐛𝐢𝐧𝐝𝐢𝐧𝐠, 𝐞𝐯𝐞𝐧𝐭 𝐛𝐢𝐧𝐝𝐢𝐧𝐠, 𝐚𝐧𝐝 𝐭𝐰𝐨-𝐰𝐚𝐲 𝐛𝐢𝐧𝐝𝐢𝐧𝐠.