القوالب وربط البيانات

تتيح لكم القوالب عرض محتوى ديناميكي في Angular. يستكشف هذا الدرس كيفية عمل القوالب وربط البيانات.

ما هو القالب؟

القالب هو HTML يستخدمه Angular لعرض واجهة المكوّن. وهو يجمع بين HTML وبنية خاصة بـ Angular لعرض البيانات.

الاستيفاء

يتيح لكم الاستيفاء إدراج قيم من المكوّن في HTML. استخدموا القوسين المعقوفين المزدوجين لعرض البيانات:

{{ data }}

{{ username }}

ربط الخصائص

يتيح لكم ربط الخصائص تعيين خصائص عناصر HTML ديناميكيًا:

[src] = "imageUrl"

<img [src]="user.profilePicture">

ربط الأحداث

يتيح ربط الأحداث لتطبيقكم الاستجابة لإجراءات المستخدم:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

الربط ثنائي الاتجاه

يحافظ الربط ثنائي الاتجاه على مزامنة واجهة المستخدم والبيانات. استخدموا [(ngModel)]:

<input [(ngModel)]="user.name">

التوجيهات البنيوية

تُعدّل التوجيهات البنيوية تخطيط DOM. ومن أمثلتها *ngIf و*ngFor.

<div *ngIf="isVisible">Visible Content</div>

استخدام ngFor

يكرّر *ngFor المرور على البيانات ويعرض العناصر بشكل متكرر:

<li *ngFor="let item of items">{{ item }}</li>

الملخص

لقد تعلّمتم كيفية استخدام القوالب وربط البيانات لإنشاء واجهات Angular ديناميكية!