Directives In ANGULAR 2+

 Directives In ANGULAR 2+

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

DOM	هو تمثيل هيكلي مستند HTML على شكل شجرة كائنات (Tree of Objects) تُسهل الوصول إلى العناصر وتعديلها ديناميكيًا.
ng-template	قالب شرطي: عنصر Angular يسمح بتعريف  محتوى قالب يتم عرضه فقط عند استدعائه، مما يوفر تحكماً كاملاً في كيفية ووقت العرض.

ما هو مصطلح الموجهات (Directives) :

نستخدم الموجهات لإحداث تغيير على عناصر DOM المعروضة في المتصفح.

أنواع الموجهات في أنغلر:

1.  الموجهات الهيكليّة Structural Directives

2. الموجهات السمات Attribute Directives

(Structural Directives) أولاً: الموجهات الهيكليّة

• عند استخدام هذا النوع من الموجهات نقوم بتغيير البنية الخاصة بعناصر ال DOM التي يتم عرضها في المتصفح.

• نقوم بوضع علامة "*" قبل السم الموجه الهيكلي مباشرة وهذا مايميزه عن النوع الآخر من الموجهات.

• أهم الموجهات الهيكليّة هي:

1- ngIf Directive*

يعرض أو يخفي عنصر DOM بناءً على شرط (true/false).

مثال 

<div *ngIf="false">

  This text will be hidden

</div>

<div *ngIf="true">

  This text will be displayed

</div>

2- ngIf-else Directive*

يعرض قسم if إذا تحقق الشرط، وقسم else إذا لم يتحقق.

مثال 

<div *ngIf="false; else elseBlock">

  This text will be hidden

</div>

<ng-template #elseBlock>

  This text will be displayed

</ng-template>

3- ngFor Directive*

يكرر عنصر DOM لكل عنصر في مصفوفة.

مثال 1

فلنفترض لدينا المصفوفة التالية

items = ["GfG 1", "GfG 2", "GfG 3", "GfG 4"];

و قمنا بتطبيق الموجهه ngFor* على عنصر Div مثلاً

<div *ngFor="let item of items">

 <p >  {{item}} </p>

</div>

سيكون الخرج في هذا المثال كالتالي:

GfG 1

GfG 2

GfG 3

GfG 4

تم تكرار عنصر الـ Div بعدد عناصر المصفوفة وتم عرض قيم هذه المصفوفة في كل دورة بداخل عنصر الـ p

مثال 2

فلنفترض لدينا المصفوفة التالية

items = ["GfG", "GfG", "GfG", "GfG"];

و قمنا بتطبيق الموجهه ngFor* على عنصر Div ذلك للحصول على نفس النتيجة السابقة ولكن بطريقة مختلفة

<div *ngFor="let item of items;let i=index">

 <p >  {{item}} {{i}} </p>

</div>

حصلنا على نفس خرج  المثال السابق كالتالي:

GfG 1

GfG 2

GfG 3

GfG 4

4- ngSwitch Directive*

يختار ويعرض عنصراً من بين عدة خيارات.

مثال

<div [ngSwitch]="'one'">

  <div *ngSwitchCase="'one'">One is Displayed</div>  

  <div *ngSwitchCase="'two'">Two is Displayed</div>  

  <div *ngSwitchDefault>Default Option is Displayed</div>  

</div>

(Attribute Directives) ثانياً: موجهات السمات

1.  تعديل خصائص أو سلوك العناصر الحالية.

2. تكتّب بين أقواس مربعة [].

1- [ngStyle] Directive

تغيير الأنماط (styles) ديناميكياً.

مثال

<p [ngStyle]="{'color': textColor, 'font-size': fontSize}">

  نص بألوان و أحجام متغيرة

</p>

2- [ngClass] Directive

إضافة أو إزالة classes ديناميكياً.

مثال

<p [ngClass]="{'active': isActive, 'error': hasError}">

 نص يتغير شكله حسب الحالة

</p>

(Attribute Directives) ثانياً: موجهات السمات

يمكنك إنشاء موجهات مخصصة باستخدام decorator @Directive.

مثال

موجهة سمات مخصصة لتغيير لون الخلفية

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({

  selector: '[appHighlight]'

})

export class HighlightDirective {

  @Input() appHighlight = '';

  constructor(private el: ElementRef) {

    this.el.nativeElement.style.backgroundColor = this.appHighlight;

  }}

موجهة سمات مخصصة لتغيير لون الخلفية

<p [appHighlight]="'yellow'">نص بخلفية صفراء</p>

المصادر:

• https://angular.io/guide/built-in-directives

• https://www.geeksforgeeks.org/structural-directives-in-angular/

• https://angular.io/guide/attribute-directives