המשך נושא Directives

במאמר הקודם פנינו אפליקציה של גלריית תמונות. בדוגמא יש רק 4 תמונות בגלריה. מה אם היום לנו 30 תמונות? המספרים למעלה היו רצים עד שהיו יוצאים מהמסך. מה עושים עם זה? אנחנו רוצים להגביל את מסר הדפים שאנחנו מציגים, למשל להראות 5 מספרים כל פעם. נרצה גם לשים איזה אינדיקציה שמראה למשתמש שיש עוד מספרים בהמשך.

ngIf

דרך מהירה להסתיר אלמנטים בדף היא על ידי שימוש ב-ngIf.

<div *ngIf="true">
...
</div>

בשימוש ב-ngIf אנחנו שולחים ל-directive ביטוי או פונקציה. אם הביטוי בעל הערך true האלמנט שבו מוצב ה-ngIf יהיה מוצג. אם הוא שווה ל-false הוא לא יוצג.

נניח שאנחנו רוצים להפעיל תנאי על הרשימה שלנו.

<ul class="pagination">
    <li class="page-item" 
    *ngFor="let image of images; let i = index"
    *ngIf="i < 5">
      <a class="page-link" href="#">{{ i + 1 }}</a>
    </li>
</ul>

אי אפשר להפעיל שני structural directive על אותו רכיב. ngIf הוא structural directive, הוא משנה את המבנה של קובץ ה-html. גם ngFor הוא כזה. בדוגמא מהמאמר הקודם, יש לנו את ngFor על רכיב ה-li, מה שאומר שאי אפשר להפעיל על אותו הרכיב גם את ngIf.

אפשרות אחת לפתרון היא להכניס אלמנט שעוטף מסביב את האלמנט שבו כבר השתמשנו ב-directive אחר, כאן למשל אפשר להוציא את ngFor לאלמנט חיצוני.

<ul class="pagination">
    <div *ngFor="let image of images; let i = index">
        <li class="page-item" 
        *ngIf="i < 5">
          <a class="page-link" href="#">{{ i + 1 }}</a>
        </li>
    </div>
</ul>

הבעיה היא שזה משנה את מבנה הקובץ שלנו ולמשל במקרה פה, div נוסף בין כל אלמנט ישנה את המראה של הרשימה. העיצוב כבר לא עובד על מבנה של li שיושב בתוך ul.

אם אנחנו צריכים להשתמש ב-directive נוסף, אבל לא רוצים להוסיף אלמנטים, יש פתרון אחר.

ngContainer

כשרוצים אלמנט נוסף שלא ישפיע על מבנה קובץ ה-html נשתמש ב-ng-container.

<ul class="pagination">
    <ng-container *ngFor="let image of images; let i = index">
        <li class="page-item" 
        *ngIf="i < 5">
          <a class="page-link" href="#">{{ i + 1 }}</a>
        </li>
    </ng-container>
</ul>

ng-container לא משנה את מבנה הקובץ ומאפשר לנו להוסיף directive נוסף.

לצורך הצגת המספרים הנכונים של התמונות, הפתרון המוצג לא מתאים, מכיוון שיוצגו המספרים 1-5 ובשאר התמונות פשוט לא יוצגו מספרים. לכן נמצא פתרון קצת יותר מתאים. נוסיף פונקציה שתטפל בהצגה של המספרים.

<nav>
    <ul class="pagination">
      <li class="page-item" [ngClass]="{ disabled: currentPage === 0 }">
        <a class="page-link" href="#" (click)="currentPage = currentPage-1">Previous</a>
      </li>

      <ng-container *ngFor="let image of images; let i = index">
        <li
          class="page-item"
          [ngClass]="{ active: i === currentPage }"
          *ngIf="checkWindowIndex(i)"
        >
          <a class="page-link" href="#" (click)="currentPage = i">{{ i + 1 }}</a>
        </li>
      </ng-container>

      <li class="page-item" [ngClass]="{ disabled: currentPage === images.length-1 }">
        <a class="page-link" href="#" (click)="currentPage = currentPage+1">Next</a>
      </li>
    </ul>
  </nav>

ngSwitch

ngSwitch מאפשר לנו לבחור את מה שיוצג על המסך לא רק על ידי הערכת true או false של משתנה, אלא על ידי הערכת הערך עצמו. נניח שאני רוצה להציג לכל תמונה תוכן ייחודי ולהתייחס לאינדקס של התמונה על מנת להציג את התוכן.

<div [ngSwitch]="currentPage">
  <div *ngSwitchCase="0">
    This is the first image.
  </div>
  <div *ngSwitchCase="1">
    This is the second image.
  </div>
  <div *ngSwitchCase="2">
    This is the third image.
  </div>
  <div *ngSwitchDefault>
    This is the third image.
  </div>
</div>

את המשתנה להערכה נשים ב-[ngSwitch] ואת הערכים עצמם בתוך ngSwitchCase. יש אפשרות להצגה של קוד כברירת מחדל על ידי ngSwitchDefault.