التعليمة الشرطية ngIf في angular#

في هدا الدرس سوف نعمل قليلا بداخل  المكون الرئيسي  app.component  بما أنه مكون جاهز وهو  كما ذكرنا سابقا الـcomponent  الذي يأتي مع التطبيق  والهدف هو التعرف على بعض تعليمات angular 

الـ ngIf هي تعليمة شرطية تستعمل داخل الـ templates  'ملفات HTML'    فتعليمة ngIf مكافئة لـتعليمة ifفي javascript, java , php , C, وغيرها من لغات البرمجة المختلفة التي يقصد بها اذا توفر الشرط فحقق الأمر

مثال  بسيط ..

لنفتح ملف  الـ template  الخاص بالمكون الرئيسي / أو خلينا نقول ملف app.component.html  .ثم ننسخ هذه التعليمة

<div *ngIf='var1=5'> <h1>{{ title }}</h1> </div>

المثال يقول إذا كان المتغير var1=5 فقم بعرض المتغير title   على شكل عنوان

طبعا هذه المتغيرات تتم معالجتها  من ملف المكون الرئيسي app.component.ts الذي يحتوى على 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  var1:number=5; // المتغير يساوي 5 بالتالي نتيجة الشرط محققة وسوف يعرض لك العنوان بالصفحة
    title = 'app';

}

مثال حول if else

<div *ngIf="isLoggedIn; else loggedOut">
  Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

المثال يقول انه  يقول اذا كانت قيمة  isLoggedin  تساوي القيمة true  فقم بعرض رسالة الترحيب  أو بمعنى اخر قم بعرض محتوى الـ div  الأول

أما إذا كانت قيمة  المتغير isLoggedin غير موجود او  يساوي القيمة false  فاذهب الى العنصر الثاني المربوط  وستجده بداخل وسم يسمى ng-template وقم بعرض محتواه

• ماهو ng-template  ؟ هو عبارة عن directive  نستعمله مع ngIf
• ماهو   directives  هو وسم خاص بالـ angular يمكن تعريف وانشاء ال directives باعدادات معينة  

مثال حول الـ and و OR والـ if not

<!-- negated variable to achieve "if not" -->
<div *ngIf="!isLoggedIn">
  Please login, friend.
</div>

<!-- logic && operator -->
<div *ngIf="isLoggedIn && role='admin'">
{{ username }} is admin !
</div>

<!-- logic OR operator -->
<div *ngIf="isLoggedIn && role='user'">
{{ username }} is user !
 </div>

المثال الأول يقول إذا كان المتغير isLoggedin غير موجود او  يساوي القيمة false اعرض له رسالة تقول له من فضلك قم بتسجيل الدخول

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

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