Return to site

ANGULAR INTERVIEW QUESTION: Can you define "Data Binding"?

ยท ngInterview,fullstack

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

broken image

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:

๐‚๐จ๐ง๐œ๐ฅ๐ฎ๐ฌ๐ข๐จ๐ง:

๐ƒ๐š๐ญ๐š ๐๐ข๐ง๐๐ข๐ง๐  ๐š๐ฅ๐ฅ๐จ๐ฐ๐ฌ ๐ญ๐จ ๐œ๐จ๐ง๐ง๐ž๐œ๐ญ ๐ฒ๐จ๐ฎ ๐€๐ง๐ ๐ฎ๐ฅ๐š๐ซ ๐š๐ฉ๐ฉ ๐ฐ๐ข๐ญ๐ก ๐ƒ๐Ž๐Œ ๐›๐ฒ ๐Ÿ‘ ๐๐ข๐Ÿ๐Ÿ๐ž๐ซ๐ž๐ง๐ญ ๐ฆ๐š๐ง๐ง๐ž๐ซ๐ฌ: ๐ฉ๐ซ๐จ๐ฉ๐ž๐ซ๐ญ๐ฒ ๐›๐ข๐ง๐๐ข๐ง๐ , ๐ž๐ฏ๐ž๐ง๐ญ ๐›๐ข๐ง๐๐ข๐ง๐ , ๐š๐ง๐ ๐ญ๐ฐ๐จ-๐ฐ๐š๐ฒ ๐›๐ข๐ง๐๐ข๐ง๐ .