---
title: Data Binding
localeTitle: ربط البيانات
---
# ربط البيانات
#### التحفيز
غالبًا ما تحدد البيانات مظهر التطبيق. يتضمن تفسير تلك البيانات في واجهة المستخدم منطق منطقي ( `.component.html` ) وعرض قالب ( `.component.ts` ). الزاوي يربطهم من خلال ربط البيانات. فكر في ربط البيانات كأداة لتفاعل المكون.
#### المكون والقالب
يخزن العنصر معظم منطقه وبياناته داخل صفه المزين بـ `@Component` . يعرّف هذا الديكور الفئة كمكون مع قالب HTML. يمثل قالب المكون الفئة داخل التطبيق. يجب أن يكون التركيز هنا بين فئة المكون ونموذج HTML.
هذا هو المكان الذي يحدث ربط البيانات. الحصول على خصائص العنصر والأحداث القيم المعينة. هذه القيم ، التي تم تعريفها بواسطة فئة المكون ، تخدم أيًا من الدورين. واحد هو لإنتاج البيانات التي يتلقاها القالب. يعالج الآخر الأحداث المنبعثة من عنصر القالب.
![مثال الكود](https://raw.githubusercontent.com/sosmaniac-FCC/designatedata/master/image4.png)
حاول استخدام هذه الصورة كنموذج ذهني للقسم التالي.
#### اتجاهات ملزمة
هناك طريقتان للربط بين البيانات: أحادي الاتجاه وثنائي الاتجاه. يستخدم الزاوي تقنياً تدفق البيانات أحادي الاتجاه فقط. تدفق ثنائي الاتجاه هو في نهاية المطاف أحادي الاتجاه. يحدث ذلك في تطبيقين لتدفق أحادي الاتجاه ، مرة واحدة لكل اتجاه. المزيد عن ذلك لاحقا.
يحدد التدفق الأحادي الاتجاه التفاعل أحادي الاتجاه. إما أن يرسل المكون البيانات إلى القالب أو يرسل القالب حدثًا إلى منطق المكون. لا يتم تغيير بيانات التغييرات داخل نطاق القالب لفئة المكون. إنبعاث الحدث عبارة عن معاملة أحادية الاتجاه تبدأ من عناصر القالب.
ثنائي الاتجاه يشكل كلا الاتجاهين. وهذا يعني أن التغييرات في البيانات في منطق الصف أو HTML النموذج تستمر عبر بعضها البعض. نطاق التغييرات هو عرض المكون. يتكون العرض من فئة المكون والقالب معًا.
#### خصائص العنصر
للتعرف على خصائص العناصر المرتبطة بالبيانات ، يستخدم Angular بنية قوس خاصة.
`// my.component.ts
@Component({
templateUrl: './my.component.html'
})
export class MyComponent {
value:type = /* some value of type */;
}
`
`