راهنمای ngIf در انگولار

در این مقاله قصد داریم نکات مربوط به ngIf و ویژگی های آن را بررسی کنیم سرفصل های این مقاله به صورت زیر است:

• منظور از ngIf چیست؟
• چگونه ngIf المان ها را مخفی میکند ؟
• چه عباراتی برای ngIf قابل قبول است؟
• سینتکس ngIf else
• سینتکس ngIf if then else
• استفاده از ngIf برای دیتای observable با استفاده از async pipe

منظور از ngIf چیست؟

در اصل ngIf یک Directive است که یک عبارت دریافت میکند و با توجه به درست بودن یا اشتباه بودن آن عبارت، تصمیم میگرد که المان مربوط باید نمایش داده شود یا خیر، به مثال زیر توجه کنید

<div class=&quotcontainer&quot *ngIf=&quotuserLoggedIn&quot>      
   . یک متن که فقط به کاربرانی که وارد سیستم شده است نشان داده میشود   
  <button *ngIf=&quotuser.admin&quot>حذف کاربر</button> 
</div>

در این مثال div فقط به کسانی نمایش داده میشود که وارد سایت شده اند و همچنین دکمه حذف کاربر تنها به ادمین نمایش داده میشود.

در اینجا میتوان به یک نکته اشاره کرد که اگر بخواهیم ngIf را به قسمتی تخصیص دهیم ولی یک نگه دارنده مختص به آن قسمت وجود نداشته باشد چه کاری میتوان انجام داد؟ برای این کار میتوانیم از ng-container استفاده کرد بدون اینکه هیج المان اضافی در خروجی نهایی ساخته شود.

<ng-container *ngIf=&quotuserLoggedIn&quot>       
. یک متن که فقط به کاربرانی که وارد سیستم شده است نشان داده میشود 
</ng-container>

چگونه ngIf المان ها را مخفی میکند ؟

شما میتوانید با استفاده از javascript یک المان را توسط css به وسیله Display مخفی کنید ولی این کاری نیست که ngIf در عمل انجام میدهد. المان های مخفی شده توسط ngIf به هیچ عنوان در خروجی نهایی به کاربر نشان داده نمیشوند یعنی اگر توسط Devtools کدهای صفحه را مشاهده کنید متوجه میشوید المان در آن وجود ندارد. تنها نشانه از آن المان یک کامنت HTML است که متوجه شوید المان در کجای صفحه قرار داشته است:

<!--bindings={
  &quotng-reflect-ng-if&quot: &quotfalse&quot
}-->

چه عباراتی برای ngIf قابل قبول است؟

به عنوان ورودی به ngIf علاوه بر یک مقدار Boolean میتوانیم یک رشته، عدد، آرایه، آبجکت و هر عبارتی که در typescript مورد قبول است را قرار دهیم در زیر چند مثال از این موارد را میبینیم:

<div class=&quotcontainer&quot *ngIf=&quot10&quot> 
   این عبارت نمایش داده میشود 
</div> 

<div class=&quotcontainer&quot *ngIf=&quot0&quot>   
  این عبارت نمایش داده نمیشود 
</div> 

<div class=&quotcontainer&quot *ngIf=&quot'hello world'&quot> 
   این عبارت نمایش داده میشود 
</div> 

<div class=&quotcontainer&quot *ngIf=&quot''&quot>   
  این عبارت نمایش داده نمیشود
 </div>

<div class=&quotcontainer&quot *ngIf=&quot{hello: 'world'}&quot>  
   این عبارت نمایش داده میشود 
</div> 

<div class=&quotcontainer&quot *ngIf=&quot{}&quot>   
  این عبارت نمایش داده میشود
</div> 

<div class=&quotcontainer&quot *ngIf=&quot[1, 2 ,3]&quot>   
  این عبارت نمایش داده میشود
 </div> 

<div class=&quotcontainer&quot *ngIf=&quot[]&quot>   
  این عبارت نمایش داده میشود
 </div>

سینتکس ngIf else

اگر قرار باشما از یک if در ساختار HTML استفاده کنیم پس منطقا باید توانایی استفاده از else را هم داشته باشیم به مثال زیر توجه کنید:

<div class=&quotcontainer&quot *ngIf=&quotcourses.length; else noCourses&quot> 
  <h1>تمام درس ها</h1>  ....
</div>
  
<ng-template #noCourses> 
  <h1>هیچ درسی ندارید</h1>
</ng-template>

اگر مقدار courses.length مقدار بزرگتر از 0 باشد ngIf این مقدار را درست تشخیص داده و container مربوط به آن را نمایش میدهد در غیر این صورت به عبارت else نگاه میکند تا ببیند چه selector ای برای آن انتخاب شده سپس قسمتی که با این selector مشخص شده است را نمایش میدهد.

سینتکس ngIf if then else

به مثال زیر توجه کنید:

<ng-container *ngIf=&quotcourses.length; then coursesList; else noCourses&quot> </ng-container> 

<ng-template #coursesList> 
  <h1>All courses available</h1>  ....
</ng-template> 

<ng-template #noCourses> 
  <h1>No courses available.</h1>
</ng-template>

در این مثال ngIf در بالا تعریف شده و قسمت هایی که با توجه به درست یا غلط بودن آن باید نشان داده میشود در یک بخش جدا است. در این حالت پس از بررسی شرط ngIf در صورت درستی به selector بعد then نگاه میکند و آن را نمایش میدهد در غیر این صورت به selector بعد else نگاه کرده و آن را نمایش میدهد.

بر خلاف javascript دستور ngIf از else if پشتیبانی نمیکند اما برای عبارت های چند شرطی میتوان از ngSwitch استفاده کرد.

استفاده از ngIf برای دیتای observable با استفاده از async pipe

در یک پروژه انگولار معمولا پیش میایید که شما یک observable دارید که میخواهید اطلاعات را از آن بخوانید.

به مثال زیر توجه کنید:

<ng-container *ngIf=&quot(courses$ | async) as courses&quot> 
<div class=&quotcourses&quot>        
    {{courses.length}}
 </div> 
</ng-container>

با استفاده از async pipe میتوانید observable خود را subscribe کنید هر وقت که از سمت سورس observable مقداری ارسال شد بخش مربوط به آن نمایش داده میشود و شما با استفاده از کلیدواژه as میتوانید به مقدار آن دسترسی داشته باشید.

از اینکه تا اینجا با من همراه بودید از شما ممنونم این مقاله برگردان قسمتی از مقاله Angular ngIf: Complete Guide بود.