بایند کردن مقادیر به ngif در انگولار

بایند کردن مقادیر به ngif در انگولار

برای بایند کردن اطلاعات در ngif به صورت خیلی ساده میتونید به صورت زیر عمل کنید :

<div *ngIf="days.day == 1">
    <p class="circle ml-3">Sun</p>
</div>
<div *ngIf="days.day == 2">
    <p class="circle ml-2">Mon</p>
</div>
<div *ngIf="days.day == 3">
    <p class="circle ml-2">Tue</p>
</div>
<div *ngIf="days.day == 4">
    <p class="circle ml-2">Wed</p>
</div>
<div *ngIf="days.day == 5">
    <p class="circle ml-2">Thu</p>
</div>
<div *ngIf="days.day == 6">
    <p class="circle ml-2">Fri</p>
</div>
<div *ngIf="days.day == 7">
    <p class="circle ml-2">Sat</p>
</div>

در کدهای بالا در هر تگ بررسی می کنیم که مقدار day  چه عددی می باشد و متناسب با آن روز هفته نمایش داده می شود.

البته این ساده ترین روش Bind کردن مقادیر هست. برای شرطهای پیچیده تر و یا حالت If/Else هم میتونید به صورت زیر عمل کنید.

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

حالات مختلف زیادی وجود داره که در داکیومنت های خود سایت انگولار می تونید مطالعه کنید.