Data Binding In ANGULAR 2+

 Data Binding In ANGULAR 2+

جدول المصطلحات:

ملفات المكون تشكل مع بعضها كتلة واحد من أصل عدة كتل ضمن مشروع الأنغلر بشكل افتراضي تكون 3 ملفات (Testing file , Html file ,Typescript file)	component
هو عبارة عن حدث يقوم به المستخدم للتفاعل مع الموقع الذي يستخدمه  كالنقر click أو التمرير للأسفل scroll down أو السحب drag ...	Event

ما هو مصطلح ربط البيانات (Data Binding) :

هي عملية تأمين التواصل ونقل البيانات وعرضها بين HTML (النموذج) وبين TypeScript (منطق العمل).

أنواع ربط (نقل) البيانات في أنغلر:

1.  نقل البيانات باتجاه واحد One Way Data Binding

2. نقل البيانات بالاتجاهين في ذات الوقت  Two Way Data Binding

(One Way Data Binding) أولاً: نقل البيانات باتجاه واحد

أ. عرض البيانات من المكون للمستخدم (Output Data)

1- إقحام السلاسل النصية String Interpolation هي إقحام المتحولات مباشرة في الHTML ليتم عرض قيمتها بشكل نصي للمستخدم

اسم الملف : app.component.ts

import { Component } from "@angular/core";

@Component({

selector: 'app-example',

template: `

              <div>

              My name is: <strong>{{firstName}}</strong>

               <strong>{{lastName}}</strong>

              </div>

             `

})

export class AppComponent {

firstName: string = "Majd";

 lastName:string = "Sayed Taha";}

في هذا المثال الخرج سيكون في المتصفح هو عرض الاسم بشكل كامل كالتالي :

My name is: Majd Sayed Taha

2- ربط الخصائص Property Binding هي إسناد قيم المتحولات المعرفة في Ts Files للخواص الأساسية الخاصة بعناصر الـ HTML بشكل عام 

مثال 1 

اسم الملف : app.component.ts

import { Component } from "@angular/core";

@Component({

selector: 'app-example',

template: `

<div>

My Name Emitted Into HTML By Property binding => <span [innerHTML]='firstName'></span>                

</div> `

})

export class AppComponent {

firstName: string = "Mohammed";}

في هذا المثال الخرج سيكون في المتصفح هو عرض الاسم ضمن عنصر ال span كالتالي : 

My Name Emitted into HTML By Property Binding => Mohammed

مثال 2

اسم الملف : app.component.ts

<h1 [style.color]="blue">This is a Blue Heading</h1>

ب. عرض البيانات من المستخدم للمكون (React To User Events)

 إقحام الأحداث Event Binding هي إقحام الأحداث التي يتفاعل بها المستخدم أثناء استخدامه الموقع

مثال 1

اسم الملف: app.component.ts

 import { Component } from "@angular/core"; 

@Component({ 

selector: 'app-example', 

template: `<button (click)='myFunction()' >Show alert</button>` 

}) 

export class AppComponent { 

myFunction(): void { 

alert('Show alert!'); } }

في هذا المثال تم التفاعل مع نقرة المستخدم على زر الـ Show alert ليتم عرض إخطار في موقع الويب الذي يتم استخدامه

 ثانياً: نقل البيانات بالاتجاهين (Two Way Data Binding)

هي إمكانية التفاعل مع الأحداث التي يقوم بها المستخدم و في ذات الوقت عرض البيانات للمستخدم آنياً 

مثال 1

اسم الملف: app.component.ts

 import { Component } from '@angular/core'; 

@Component({ 

selector: 'app-example', 

template: ` 

<input [(ngModel)] ='val'> 

<br> 

Entered value is:  {{val}} 

 ` }) 

export class AppComponent { 

val: string = ''; }

في هذا المثال تم التفاعل مع حقل الإدخال الذي يكتب فيه المستخدم و في ذات الوقت عرض القيمة المدخلة في موقع الويب الذي يتم استخدامه

 

ملاحظة:

لكي يعمل ال ngModel directive  يجب القيام بتضمين التالي

اسم الملف: app.module.ts

import { NgModule } from '@angular/core'; 

import { BrowserModule } from '@angular/platform-browser'; 

import { FormsModule } from "@angular/forms"; 

import { AppComponent } from './app.component'; 

import { FormsModule } from "@angular/forms";
@NgModule({ 

imports: [BrowserModule, FormsModule], 

declarations: [ AppComponent], 

bootstrap: [AppComponent] }) 

export class AppModule { }

المصادر:

• https://angular.io/guide/binding-syntax

• https://www.pluralsight.com/guides/one-and-two-way-data-binding-angular