שיעור 12 באנגולר (angular) – תנאים ngIf

בפוסט הזה, נראה כיצד לממש תנאים באנגולר.

תנאים באנגולר עם ngIf*

הצורה הפשוטה ביותר היא עם directive שנקרא ngIf*.

כאשר בתוך המרכאות נותנים לו ביטוי בוליאני, ובהתאם, הוא "משליך" על התגית בה הוא נמצא.

לדוגמא הקוד הבא – יציג\יסתיר את השם לפי ערך המשתנה הבוליאני.

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

@Component({
 selector: 'app-ngif2',
 template:`
 <p>My Name is : <span *ngIf="showName">{{name}}</span></p>
 `
})
export class Ngif2Component implements OnInit {

 name:string = "Eyal";
 showName:boolean = true;

 constructor() { }

 ngOnInit() {
 }

}

נניח ונרצה לגרום לתנאי לעבוד בצורה הפוכה, כלומר, כל פעם שהשם לא מוצג, אז מוצג משהו אחר.

דרך פשוטה לעשות זאת, היא עם סימן קריאה לפני הביטוי הבוליאני (כלומר, כל עוד הביטוי לא מתקיים, אז התנאי הבוליאני כן מתקיים).

דוגמא :

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

@Component({
 selector: 'app-ngif2',
 template:`
 <p>My Name is : 
 <span *ngIf="showName">{{name}}</span>
 <span *ngIf="!showName">{{'KOKO'}}</span>
 
 
 </p>
 `
})
export class Ngif2Component implements OnInit {

 name:string = "Eyal";
 showName:boolean = false;

 constructor() { }

 ngOnInit() {
 }

}

אבל, ברור שצריך אפשרות נורמלית ל-else. וזו הדוגמא הבאה.

תנאי ngIf באנגולר עם else + היכרות עם ngTemplate

בקטע קוד הבא, אנחנו אומרים למעשה שאם התנאי לא מתקיים, אז …להציג את מה שנקרא bubu.

ומה שנקרא bubu , הוא תבנית, שאנחנו מגדירים מייד לאחר מכן.

אפשר להגדיר כמה תבניות שרוצים, כל עוד נותנים להם שם יחודי באמצעות סולמית בהתחלה.

<h1>ngIf with Else And Template</h1>
 <p>My Name is :
 <span *ngIf="showName; else noname">{{name}}</span>
 <ng-template #noname >KOKO</ng-template>
 </p>

תנאי  ב-JS – בצורה מקוצרת

וכמו בכל השפות, יש גם צורה מקוצרת. אז גם באנגולר...למעשה יותר נכון, גם ב-JS , יש צורה מקוצרת, נציין אותה כאן בכל מקרה.

 <p>Hello {{ showName ? name : 'koko' }}</p>

תנאים מרובים באנגולר עם ngSwitch*

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

 ----- In the class ----
 personType:number = 2;

 ----- In the HTML template -----
 <div [ngSwitch]="personType">
 <span *ngSwitchCase="'1'" >Nice person</span>
 <span *ngSwitchCase="'2'"> Evil Person</span>
 <span *ngSwitchDefault> Just normal </span>
 </div>

 

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *