ربط خصائص عناصر HTML ديناميكياً

ربط الخصائصProperty Bindingسمات HTMLعناصر الواجهةAngular 22.1

جدول مرجعي سريع

خاصية عنصر HTML	صيغة الاستخدام بالأقواس المربعة	الهدف البرمجي والاستخدام
تعطيل وتفعيل العناصر	[disabled]	التحكم في إمكانية تفاعل المستخدم مع الأزرار أو حقول الإدخال برمجياً
تغيير مصادر الصور والروابط	[src] أو [href]	تحديث روابط الصور أو مسارات التنقل ديناميكياً بناءً على الحالة
التحكم في الإظهار والإخفاء	[hidden]	إخفاء أو إظهار عنصر واجهة المستخدم استجابة لمتغيرات النظام
تعديل قيم حقول الإدخال	[value]	حقن القيم البرمجية مباشرة داخل عناصر الـ input أو textarea

الشرح

نستكمل رحلتنا في الفصل الخامس حول القوالب، لنصل إلى الدرس الثالث المتعلق بـ ربط الخصائص (Property Binding) في إصدار Angular 22.1. على عكس الربط النصي الذي يُستخدم لعرض النصوص داخل محتوى العناصر، يُتيح لك ربط الخصائص التحكم الديناميكي في سمات عناصر الـ HTML (مثل disabled, src, alt, value, أو hidden) بناءً على البيانات والمتغيرات الموجودة في صنف المكون (TypeScript).

تفصيل فلسفة وعمل ربط الخصائص

صيغة الأقواس المربعة (Property Binding Syntax):

يتم وضع اسم خاصية عنصر الـ HTML بين أقواس مربعة مثل [disabled]="expression"، حيث يخبر هذا الرمز محرك أنجولر أن القيمة الموجودة في الطرف الأيمن هي تعبير برمجي قادم من ملف الـ TypeScript وليست مجرد نص ثابث.

الفرق بين سمات DOM وخصائص HTML:

في أنجولر، يتعامل ربط الخصائص مباشرة مع خصائص عناصر الـ DOM (Document Object Model) وليس السمات النصية للـ HTML، مما يمنحك دقة متناهية وسرعة في تحديث حالات العناصر على الشاشة.

أمثلة برمجية: استخدام الأقواس المربعة للتحكم في الخصائص

المثال الأول: ربط خصائص الأزرار والصور وحقول الإدخال

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-property-binding-demo',
5	standalone: true,
6	template: `
7	<div class="product-card">
8	<!-- 1. ربط خاصية مصدر الصورة والرابط -->
9	<img [src]="productImageUrl" [alt]="productTitle">
10	<h3>{{ productTitle }}</h3>
11
12	<!-- 2. ربط خاصية التعطيل للزر -->
13	<button [disabled]="isOutOfStock">شراء المنتج</button>
14
15	<!-- 3. ربط خاصية القيمة لحقل الإدخال -->
16	<input type="text" [value]="defaultPromoCode" placeholder="كود الخصم">
17	</div>
18	`
19	})
20	export class PropertyBindingDemoComponent {
21	productTitle = 'سماعات رأس لاسلكية متطورة';
22	productImageUrl = 'https://example.com/images/headphones.png';
23	isOutOfStock = true;
24	defaultPromoCode = 'SUMMER2026';
25	}

أمثلة برمجية: التحكم الديناميكي في الفئات والأنماط

المثال الثاني: ربط الخصائص لتغيير الأنماط والتنسيق (Style & Class Binding)

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-dynamic-styles',
5	standalone: true,
6	template: `
7	<div class="status-panel">
8	<!-- ربط خاصية الـ style لتغيير اللون ديناميكياً -->
9	<p [style.color]="isOnline ? 'green' : 'red'">
10	حالة الاتصال: {{ isOnline ? 'متصل الآن' : 'منقطع' }}
11	</p>
12
13	<!-- ربط خاصية الـ class لتفعيل فئة CSS بناءً على شرط -->
14	<div [class.highlight]="hasNewNotifications">
15	لديك إشعارات جديدة غير مقروءة
16	</div>
17
18	<button (click)="toggleConnectionStatus()">تبديل حالة الاتصال</button>
19	</div>
20	`
21	})
22	export class DynamicStylesComponent {
23	isOnline = true;
24	hasNewNotifications = true;
25
26	toggleConnectionStatus() {
27	this.isOnline = !this.isOnline;
28	this.hasNewNotifications = !this.hasNewNotifications;
29	}
30	}

نصائح احترافية

—استخدم الأقواس المربعة [property] دائماً عندما تكون القيمة المستهدفة متغيراً برمجياً أو عملية منطقية وليس نصاً ثابتاً!
—الاعتماد الخاطئ على كتابة السمات بدون أقواس مربعة يعامل القيمة على أنها نص حرفي بسيط، بينما الأقواس المربعة تضمن تقييم البيانات وتحديثها برمجياً بكل احترافية وكفاءة.

الدرس السابق

الربط النصي لعرض البيانات

الدرس التالي

الاستماع لتفاعلات المستخدم عبر ربط الأحداث

خاصية عنصر HTML

صيغة الاستخدام بالأقواس المربعة

الهدف البرمجي والاستخدام

تعطيل وتفعيل العناصر

[disabled]

التحكم في إمكانية تفاعل المستخدم مع الأزرار أو حقول الإدخال برمجياً

تغيير مصادر الصور والروابط

[src] أو [href]

تحديث روابط الصور أو مسارات التنقل ديناميكياً بناءً على الحالة

التحكم في الإظهار والإخفاء

[hidden]

إخفاء أو إظهار عنصر واجهة المستخدم استجابة لمتغيرات النظام

تعديل قيم حقول الإدخال

[value]

حقن القيم البرمجية مباشرة داخل عناصر الـ input أو textarea

تفصيل فلسفة وعمل ربط الخصائص

صيغة الأقواس المربعة (Property Binding Syntax):

الفرق بين سمات DOM وخصائص HTML:

أمثلة برمجية: استخدام الأقواس المربعة للتحكم في الخصائص

المثال الأول: ربط خصائص الأزرار والصور وحقول الإدخال

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-property-binding-demo',
5	standalone: true,
6	template: `
7	<div class="product-card">
8	<!-- 1. ربط خاصية مصدر الصورة والرابط -->
9	<img [src]="productImageUrl" [alt]="productTitle">
10	<h3>{{ productTitle }}</h3>
11
12	<!-- 2. ربط خاصية التعطيل للزر -->
13	<button [disabled]="isOutOfStock">شراء المنتج</button>
14
15	<!-- 3. ربط خاصية القيمة لحقل الإدخال -->
16	<input type="text" [value]="defaultPromoCode" placeholder="كود الخصم">
17	</div>
18	`
19	})
20	export class PropertyBindingDemoComponent {
21	productTitle = 'سماعات رأس لاسلكية متطورة';
22	productImageUrl = 'https://example.com/images/headphones.png';
23	isOutOfStock = true;
24	defaultPromoCode = 'SUMMER2026';
25	}

أمثلة برمجية: التحكم الديناميكي في الفئات والأنماط

المثال الثاني: ربط الخصائص لتغيير الأنماط والتنسيق (Style & Class Binding)

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-dynamic-styles',
5	standalone: true,
6	template: `
7	<div class="status-panel">
8	<!-- ربط خاصية الـ style لتغيير اللون ديناميكياً -->
9	<p [style.color]="isOnline ? 'green' : 'red'">
10	حالة الاتصال: {{ isOnline ? 'متصل الآن' : 'منقطع' }}
11	</p>
12
13	<!-- ربط خاصية الـ class لتفعيل فئة CSS بناءً على شرط -->
14	<div [class.highlight]="hasNewNotifications">
15	لديك إشعارات جديدة غير مقروءة
16	</div>
17
18	<button (click)="toggleConnectionStatus()">تبديل حالة الاتصال</button>
19	</div>
20	`
21	})
22	export class DynamicStylesComponent {
23	isOnline = true;
24	hasNewNotifications = true;
25
26	toggleConnectionStatus() {
27	this.isOnline = !this.isOnline;
28	this.hasNewNotifications = !this.hasNewNotifications;
29	}
30	}