شرح Angular *ngFor و *ngIf للمبتدئين بأسلوب عملي واضح

مقدمة إلى *ngFor و *ngIf في Angular

تُعدّ التوجيهات البنيوية في Angular من أهم الأدوات التي تساعدك على كتابة واجهات ديناميكية ومنظمة. ومن بين أكثرها استخداماً نجد *ngFor و*ngIf، إذ تتيح لك الأولى التكرار على البيانات وعرضها داخل الواجهة، بينما تسمح الثانية بإظهار العناصر أو إخفائها بناءً على شرط محدد.

فهم هذين التوجيهين يمنحك قدرة أكبر على بناء تطبيقات أكثر وضوحاً ومرونة، خاصة عند التعامل مع القوائم، أو حالات التحميل، أو شروط عرض المحتوى.

ما هو *ngFor في Angular؟

يُستخدم *ngFor للتكرار على المصفوفات وعرض عناصرها داخل واجهة المستخدم. وبعبارة أبسط، عندما تكون لديك قائمة بيانات مثل أسماء المستخدمين أو المنتجات أو المقالات، يمكنك عبر *ngFor إنشاء عنصر HTML لكل عنصر داخل هذه المصفوفة تلقائياً.

مثال على البيانات داخل ملف TypeScript

لنبدأ بمصفوفة تحتوي على مجموعة من الأشخاص وأعمارهم:

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

@Component({
  selector : 'app-root' ,
  templateUrl : './app.component.html' ,
  styleUrls : [ './app.component.css' ]
})
export class AppComponent {
  title = 'angular-project' ;
  friendslist = [
    { name : 'Nishant' , age : 25 },
    { name : 'Shailesh' , age : 45 },
    { name : 'Abhishek' , age : 36 },
    { name : 'Akshay' , age : 65 },
    { name : 'Ashish' , age : 12 },
    { name : 'Uday' , age : 31 },
    { name : 'Mayank' , age : 45 },
    { name : 'Raju' , age : 74 },
  ]
}

تحتوي هذه المصفوفة على كائنات، وكل كائن يضم اسم الشخص وعمره.

إنشاء قائمة HTML لعرض البيانات

قبل استخدام *ngFor، يمكننا إنشاء قائمة غير مرتبة بالشكل التالي:

<ul>
  <li></li>
</ul>

لكن هذا الشكل لا يعرض أي بيانات فعلية. لذلك نستخدم *ngFor داخل العنصر li للتكرار على المصفوفة:

<ul>
  <li *ngFor="let item of friendslist">
    The name and age is here
  </li>
</ul>

في هذا المثال، تقوم Angular بإنشاء عنصر item لكل كائن داخل friendslist. وبذلك سيتكرر عنصر li بعدد العناصر الموجودة في المصفوفة.

عند حفظ الملف، ستلاحظ ظهور 8 عناصر في القائمة، لأن المصفوفة تحتوي على 8 سجلات.

عرض البيانات بشكل ديناميكي باستخدام Interpolation

بدلاً من كتابة نص ثابت، يمكن عرض قيم كل عنصر بشكل ديناميكي باستخدام Interpolation عبر الأقواس المعقوفة المزدوجة:

<ul>
  <li *ngFor="let item of friendslist">
    {{ item.name }} {{ item.age }}
  </li>
</ul>

هنا سيتم طباعة item.name وitem.age لكل عنصر في المصفوفة. وتُعد هذه الطريقة من الأساليب الأساسية لعرض البيانات داخل القوالب في Angular.

تنسيق عرض القائمة بطريقة أوضح

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

<ul>
  <li *ngFor="let item of friendslist">
    {{ item.name }} is {{ item.age }} years old
  </li>
</ul>

بهذا الشكل يصبح كل عنصر في القائمة عبارة عن جملة مفهومة تعرض اسم الشخص وعمره.

ما هو *ngIf في Angular؟

يُستخدم *ngIf لإظهار عنصر أو إخفائه وفق شرط منطقي. وهو مفيد جداً في سيناريوهات عديدة، مثل:

• إظهار رسالة تحميل أثناء انتظار البيانات من API.
• عرض محتوى معين فقط إذا كان المستخدم مسجلاً للدخول.
• إخفاء جزء من الواجهة عند عدم توفر البيانات.

الفكرة الأساسية هنا أن Angular تفحص قيمة الشرط، فإذا كانت true يتم عرض العنصر، وإذا كانت false يتم إخفاؤه من الواجهة.

مثال عملي على *ngIf مع قائمة

لنفترض أننا نعرض القائمة نفسها أولاً:

<ul>
  <li *ngFor="let item of friendslist">
    {{ item.name }} is {{ item.age }} years old
  </li>
</ul>

الناتج سيكون قائمة كاملة تحتوي على جميع العناصر.

الآن سنضيف زراً لإخفاء القائمة:

<ul>
  <li *ngFor="let item of friendslist">
    {{ item.name }} is {{ item.age }} years old
  </li>
</ul>

<button>Click to Hide List</button>

إنشاء متغير منطقي للتحكم في الظهور

في ملف TypeScript، نضيف متغيراً من النوع boolean باسم isVisible:

isVisible: boolean = true ;

بما أن القيمة الابتدائية هي true، فهذا يعني أن القائمة ستظهر عند تحميل الصفحة.

إنشاء دالة لإخفاء القائمة

بعد ذلك، ننشئ دالة تقوم بتغيير قيمة isVisible إلى false:

hideList(){
  this.isVisible = false ;
}

ثم نربط هذه الدالة بزر النقر:

<button (click)="hideList()">Click to Hide List</button>

كلما ضغط المستخدم على الزر، سيتم تنفيذ الدالة، وبالتالي تتحول قيمة isVisible إلى false.

استخدام *ngIf مع القائمة

الخطوة الأخيرة هي ربط ظهور القائمة بقيمة isVisible عبر *ngIf:

<ul *ngIf="isVisible">
  <li *ngFor="let item of friendslist">
    {{ item.name }} is {{ item.age }} years old
  </li>
</ul>

<button (click)="hideList()">Click to Hide List</button>

الآن، إذا كانت isVisible تساوي true فستظهر القائمة، وإذا أصبحت false فستختفي ويبقى الزر فقط ظاهراً في الصفحة.

تحويل الإخفاء إلى Toggle

بدلاً من إخفاء القائمة نهائياً، يمكن تعديل الدالة لتبديل القيمة بين true وfalse في كل مرة:

hideList(){
  this.isVisible = !this.isVisible;
}

هذه الطريقة تُعرف باسم toggle، وهي مفيدة عندما تريد السماح للمستخدم بإظهار العنصر وإخفائه بالتناوب.

الفرق بين *ngFor و *ngIf

أفضل الممارسات عند استخدام *ngFor و *ngIf

• استخدم *ngFor عندما تحتاج إلى عرض مجموعة من العناصر القادمة من مصفوفة.
• استخدم *ngIf عندما تريد التحكم في ظهور جزء من الواجهة بناءً على شرط منطقي.
• احرص على تسمية المتغيرات بأسماء واضحة مثل item وisVisible لتسهيل قراءة الكود.
• عند التعامل مع بيانات من API، اجمع بين *ngIf ورسائل التحميل لتحسين تجربة المستخدم.
• اجعل القالب بسيطاً قدر الإمكان لتسهيل الصيانة والتطوير لاحقاً.

لماذا يُعد فهم هذه التوجيهات مهماً للمبتدئين؟

لأن معظم تطبيقات Angular تعتمد على التعامل مع البيانات الديناميكية. فعرض القوائم، والتحكم في ظهور المحتوى، والتفاعل مع المستخدم كلها مهام يومية في أي مشروع حقيقي. وكلما أتقنت *ngFor و*ngIf مبكراً، أصبحت قادراً على بناء مكونات أكثر كفاءة ووضوحاً.

الخلاصة التقنية

يوفر *ngFor في Angular طريقة عملية لتوليد العناصر تلقائياً من المصفوفات، بينما يتيح *ngIf التحكم في عرض المحتوى بحسب الشروط. وعند استخدامهما معاً، تحصل على واجهة ديناميكية مرنة وسهلة الإدارة. من الناحية التقنية، يُنصح بالاعتماد عليهما كأساس لبناء القوالب التفاعلية، خاصة في التطبيقات التي تتعامل مع بيانات متغيرة أو استجابات قادمة من API.