ארכיון הקטגוריה: angular

שיעור 18 באנגולר (angular) – טפסים, ngModel, ואירועי מקלדת

  • בפוסט הזה אני רוצה להדגים יכולת חשובה של אנגולר – כיצד לטפל בטפסים.
  • לפני שאני מציג את הטפסים, נציג המחשה קטנה של אירועי מקלדת, כי את אותו רעיון אני אציג אחר כך עם הטפסים.
  • הרעיון הוא להציג את הקלט המוקלד, תוך כדי הקלדה.

המחשה של אירועי מקלדת באנגולר

הקוד הבא מציג את הטקסט המוקלד בשדה, תוך כדי הקלדה.

הוא משתמש באירוע keyup, וב-data binding על מנת לעשות זאת.

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

@Component({
 selector: 'app-keyup2',
 template: `
 <h1> keyup demo</h1>
 <input type="text"
 (keyup)="changeText($event)">
 <hr>
 <h1>Your Text is : {{ text }}</h1>
 
 
 `
})
export class Keyup2Component {
 text:string = '';

 changeText(event) {
 this.text = event.target.value;
 }
}

טפסים ושימוש ב-ngModel באנגולר

  • הדרך הקודמת שהצגתי הייתה מעט גולמית, היות וממש טיפלנו באירוע המקלדת
  • יש דרך יותר אלגנטית לעשות זאת, אם נרתום לטובתינו את מודל הטפסים של אנגולר.
  • בקוד הבא, אני מייבא את ngModel ( גם ב app.module.ts, וגם בקלאס של הקומפוננט שלי )
  • לאחר מכן , בכל שדה של טופס שאני יוצר, אני קושר אליו משתנה מסויים במחלקה באמצעות [(ngModel)]
  • וכך אנחנו נהנים מ-data binding ל-2 הכיוונים.
---- in app.module.ts file -----------

import {FormsModule } from '@angular/forms';
...
...
 imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 RouterModule.forRoot(appRoutes)
 ],

 
---- in my component ts file -------------------
import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-ngmodel22',
 template:`
 <h1> ng model demo</h1>

 <form>
 <label>your name : </label> 
 <input type="text" name="name" [(ngModel)]="name">

 <br><br>
 <label>your age : </label> 
 <input type="text" name="age" [(ngModel)]="age">
 <br><br>
 <input type="submit" value="submit">
 </form>
 
 <hr>
 <h1>Your Name : {{name}}</h1>
 <h1>Your Age : {{age }}</h1>
 `
})
export class Ngmodel22Component implements OnInit {

 name:string = 'Eyal';
 age:number = 20;

 constructor() { }

 ngOnInit() {
 }

}

אירוע של Sumbit עבור טופס

  • בדוגמא הזו ניתן לראות שאירוע ה-submit מטופל בתוספת קטנה בתגית ה–form שמפנה אל פונקציה בקלאס.
  • אומנם בדוגמא הנוכחית, התוכן לא נשלח לשום מקום, אלא רק מתווסף אל רשימה בתחתית המסך.
import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-formss2',
 template:`
 <form (submit)="onSubmit()">
 <div class="form-group">
 <label>Name</label>
 <input type="text" class="form-control" 
 [(ngModel)]="name" name="name">
 </div>
 <input type="submit" class="btn btn-success" value="Submit">
 </form>
 <hr>
 <ul class="list-group">
 <li class="list-group-item"
 *ngFor="let user of users">{{ user}}</li>
 </ul>
 
 
 `
})

export class Formss2Component implements OnInit {

 name:string = '';
 users:string[] = ['Bubu','Momo','Koko'];
 constructor() { }

 ngOnInit() {
 }

 onSubmit(){
 // console.log(this.name);
 this.users.push(this.name);
 this.name = '';
 }
}

שימוש בטפסים מבוססי תבנית באנגולר + וולידציה של טפסים באנגולר

בטופס הבא צריך לשים לב לכמה נקודות:

    • בכל שדה הגדרנו את השיוך ל ngModel
    • וגם הגדרנו עבורו id שמפנה ל ngModel
    • וגם הגדרנו בראש הטופס #f  עבור הטופס כולו – שמוצמד ל ngForm
  • בנוגע לוולידציה :
    • הגדרנו div מיוחדים עם הודעות השגיאה, שבאמצעות ngIf* יודעים להגיב לשגיאות.
  • בנוגע לפעולת ה-submit של הטופס, קיבלנו אובייקט שמכיל 2 משתנים,משתנה אחד הוא ערך בוליאני – האם הוולידציה עברה או לא, ומשתנה שני מכיל אובייקט עם תוכן הטופס.
 import { Component, OnInit } from '@angular/core';

 @Component({
 selector: 'app-forms-model33',
 template:`
 <form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
 <div class="form-group">
 <label>Name</label>
 <input class="form-control" type="text" [(ngModel)]="user.name"
 name="name"
 #userName="ngModel"
 minlength="2"
 required
 >
 </div>
 <div *ngIf="userName.errors?.required && userName.touched" class="alert alert-danger">שם נדרש</div>
 <div *ngIf="userName.errors?.minlength && userName.touched" class="alert alert-danger">לפחות 2 אותיות נדרשות</div>
 <div class="form-group">
 <label>Email</label>
 <input class="form-control" type="text" [(ngModel)]="user.email"
 name="email"
 #userEmail="ngModel"
 
 required
 >
 <div *ngIf="userEmail.errors?.required && userEmail.touched" class="alert alert-danger">אימייל נדרש</div>
 
 </div>
 <div class="form-group">
 <label>Phone</label>
 <input class="form-control" type="text" [(ngModel)]="user.phone"
 name="phone"
 #userPhone="ngModel"
 minlength="10"
 >
 <div *ngIf="userPhone.errors?.minlength && userPhone.touched" class="alert alert-danger">טלפון של 10 ספרות לפחות </div>
 
 </div>

 <input type="submit" value="Submit" class="btn btn-success">
 </form>
 
 
 `
 })
 export class FormsModel33Component implements OnInit {
 
 user = {name: '' , email: '' , phone : 0 };

 constructor() { }

 ngOnInit() {
 }
 
 onSubmit({value,valid}) {
 if(valid){
 console.log(value);
 }else{
 console.log("Form is invalid");

 }
 }

 }

 

שיעור 17 באנגולר (angular) – שינוי מאפיינים

דוגמא 1 – כפתור שגורם לטקסט להשתנות

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

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

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

@Component({
 selector: 'app-properties2',
 template:`
 <h1>hi</h1>
 <button (click)="changeValue()">Change Value</button>
 <h1>{{text}}</h1>
 `
})
export class Properties2Component implements OnInit {
 text:string = "Hello world";

 constructor() { }

 ngOnInit() {
 }

 changeValue() {
 this.text = "Goodbye";
 }

}

דוגמא 2 – קטע שמוסתר בעקבות לחיצה

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

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

@Component({
 selector: 'app-properties2',
 template:`
 <h1>hi</h1>
 <button (click)="changeValue()">Change Value</button>
 <div *ngIf="value">
 <h1>{{text}}</h1>
 </div>
 `
})
export class Properties2Component implements OnInit {
 text:string = "Hello world";
 value:boolean = true;

 constructor() { }

 ngOnInit() {
 }

 changeValue() {
 this.value = false;
 //this.text = "Goodbye";
 }

}

דוגמא 3 – לבנות div שנפתח ונסגר בלחיצה

אם נעשה שינוי קטן מאוד בפונקציה, נוכל לגרום לכך, שהמשתנה value ששולט בתצוגת ה-div, כל פעם יחליף את ערכו בלחיצה.

התוצאה של זה היא שבכל לחיצה ה-div יוצג\יוסתר, ויצרנו למעשה  toggle button .

changeValue() {

this.value=!this.value;

//this.text = "Goodbye";

}

שיעור 16 באנגולר – אירועים של העכבר

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

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

אירוע לחיצה על העכבר – אנגולר

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

@Component({
 selector: 'app-mouseevents2',
 template: `
 <h1>Hi</h1>
 <button (click)="fireEvent('Hi')">Click Me</button>
 
 `
})
export class Mouseevents2Component implements OnInit {

 constructor() { }

 fireEvent(msg) {
 console.log(msg);
 }

 ngOnInit() {
 }

}

העברת אוביקט האירוע לפונקציה

אפשר להעביר גם את האירוע עצמו, ולקבל המון מידע.

  • כדי להעביר את אובייקט האירוע עצמו, נרשום בפרמטר הראשון משתנה שמתחיל בדולר
  •  ניקח לדוגמא 2 מאפיינים מעניינים מתוך אוביקט האירוע – את ה- id, של האלמנט שלחצו עליו, ואת סוג האלמנט.
import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-mouseevents2',
 template: `
 <h1>Hi</h1>
 <button 
 id="FirstButton"

 (click)="fireEvent($event,'Hi')">Click Me</button>
 
 `
})
export class Mouseevents2Component implements OnInit {

 constructor() { }

 fireEvent(event,msg) {
 console.log(event.target.id);
 console.log(event.type);
 }

 ngOnInit() {
 }

}

אירוע mouseover

האירוע הבא מתרחש כאשר עוברים עם העכבר על אלמנט

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

@Component({
 selector: 'app-mouseevents2',
 template: `
 <h1>Hi</h1>
 <button 
 id="FirstButton"

 (click)="fireEvent($event,'Hi')">Click Me</button>
 <br>
 <button
 (mouseover)="fireAfterMouseover($event)">pass the mouse here</button>
 
 


 `
})
export class Mouseevents2Component implements OnInit {

 constructor() { }

 fireEvent(event,msg) {
 console.log(event.target.id);
 console.log(event.type);
 }

 fireAfterMouseover(event) {
 console.log(event.type);
 }

 ngOnInit() {
 }

}

אירועי עכבר נוספים

אירועים נוספים אפשרים :

  • mousedown – כאשר לוחצים ומחזיקים את העכבר
  • mouseup – כאשר משחררים את לחיצת העכבר
  • dblclick – לחיצה כפולה
  • drag  – כאשר מסמנים ואז מנסים לגרור את הקטע המסומן
  • dragover – כאשר מסמנים ואז מנסים לגרור משהו מעל האלמנט הנוכחי.

 

שיעור 15 באנגולר (angular) – שימוש ב-pipes

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

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

דוגמא 1 – pipe שמעצב תאריך

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

@Component({
 selector: 'app-pipes2',
 template: `
 
 <h1>Pipes 2</h1>
 <p>His birthday is on {{birth | date }}.</p>
 
 `
})
export class Pipes2Component implements OnInit {

 birth:Date = new Date(1980,7,8);

 constructor() { }

 ngOnInit() {
 }

}

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

דוגמא 2  – עיצוב תאריך ב- dd/mm/yyyy

<p>His birthday is on {{birth | date:"dd/MM/yyyy" }}.</p>

מספר דוגמאות ל-pipes יחד

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

@Component({
 selector: 'app-pipes2',
 template: `
 
 <h1>Pipes 2</h1>
 <p>His birthday is on {{birth | date }}.</p>
 <p>His birthday is on {{birth | date:"dd/MM/yyyy" }}.</p>
 <p>He was born at {{birth | date:"yyyy" }}.</p>
 <p>pipes of uppercase {{ 'cats' | uppercase}}</p>
 <p>pipes of lowercase {{ 'CATS' | uppercase}}</p>
 <p>pipe of currency {{total | currency:"NIS":1 }}</p>
 <p>fee is {{ fee | percent }}</p>
 
 
 
 `
})
export class Pipes2Component implements OnInit {

 birth:Date = new Date(1980,7,8);
 total:number = 459;
 fee:number = 0.7;

 constructor() { }

 ngOnInit() {
 }

}

שיעור 14 באנגולר (angular) – שליטה בתצוגה עם ngClass \ ngStyle

בדוגמאות הבאות, אציג 2 מאפיינים חשובים לטיפול בעיצוב :  ngClass+ngStyle.

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

הגדרה באנגולר של css class שמופעל רק אם משתנה הוא true

נניח ואנחנו רוצים שאלמנט יקבל עיצוב מסוים, רק אם משתנה בוליאני הוא אמת.

לצורך כך, נרשום מאפיין של angular, שקושר את ה-css class, אל המשתנה.

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

@Component({
 selector: 'app-ngclass2',
 template: `
 <h1>Hello World</h1>
 <h4 [class.special]="isSpecial" >Special Sentence</h4>
 
 
 `,
 styles: [
 ` .special {
 color: yellow
 }
 `
 ]
})
export class Ngclass2Component implements OnInit {

 isSpecial = false;
 canSave = true;

 constructor() { }

 ngOnInit() {
 }

}



השמת מספר קלאסים יחד על אלמנט באנגולר באמצעות ngClass

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

  • שימו לב לשימוש ב-ngClass
  • שימו לב להפעלה של הפונקציה שממלאת את האוביקט , ואני קורא לה בקונסטרקטור.

 

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

@Component({
 selector: 'app-ngclass2',
 template: `
 <h1>Hello World</h1>
 <h4 [class.special]="isSpecial" >Special Sentence</h4>
 <h4 [ngClass]="currentClasses">Saveable and Special div</h4>
 
 `,
 styles: [
 ` .special {
 color: green
 }
 .saveable {
 text-transform: uppercase;
 }
 `
 ]
})
export class Ngclass2Component implements OnInit {

 isSpecial = true;
 canSave = true;

 currentClasses = {};

 constructor() { 
 this.setCurrentClasses();
 }

 ngOnInit() {
 }

 setCurrentClasses(){
 this.currentClasses = {
 saveable: this.canSave,
 special: this.isSpecial
 }
 }
}

 

הפעלה של עיצוב באמצעות משתנה

בדוגמא הבאה, אנחנו קובעים את גודל הפונט, לפי משתנה מסוים במחלקה.

שימו לב ל-syntax, שבו למעשה כל משפט התנאי הוא בתוך הגרשיים.

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

@Component({
 selector: 'app-ngstyle2',
 template: `
 
 <h1> ng style</h1>
 <div [style.font-size]="isSpecial ? '40px' : '8px'">Font size depends on isSpecial</div>
 `
})
export class Ngstyle2Component implements OnInit {

 isSpecial:boolean = true;
 canSave:boolean = true;

 constructor() { }

 ngOnInit() {
 }

}

הפעלה של מספר עיצובים יחד באמצעות ngStyle

בדוגמת הבאה, אני קובע מספר הגדרות CSS יחד, ומחיל אותם בתור אובייקט, על אלמנט מסוים.

  • שימוש לב לשימוש במאפיין ngStyle
  • שימו לב להפעלה של הפונקציה שממלאת את האובייקט ומופעלת מהקונסטרקטור.
import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-ngstyle2',
 template: `
 
 <h1> ng style</h1>
 <div [style.font-size]="isSpecial ? '40px' : '8px'">Font size depends on isSpecial</div>
 
 <div [ngStyle]="currentStyles">One More DIV</div>
 `
})
export class Ngstyle2Component implements OnInit {

 isSpecial:boolean = true;
 canSave:boolean = true;
 currentStyles = {};


 constructor() { 
 this.setCurrentStyles();
 }

 setCurrentStyles(){
 this.currentStyles = {
 'font-style': this.canSave ? 'italic' : 'normal',
 'font-size': this.isSpecial ? '24px' : '12px'
 }
 }

 ngOnInit() {
 }

}

שיעור 13 באנגולר (angular) – מספר שיטות ל- Data Binding

באנגולר יש מספר שיטות לבצע Data Binding, כלומר לקשור בין ערך של משתנה בקלאס ובין משהו שמוצג על המסך.

נראה 3 שיטות, כולן משיגות את אותה תוצאה בסופו של דבר :

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

@Component({
 selector: 'app-data-binding2',
 template: `
 <img src="{{ imageUrl }}">
 <img [src]="imageUrl" >
 <img bind-src="imageUrl">
 
 
 `
})
export class DataBinding2Component implements OnInit {

 imageUrl:string = 'http://lorempixel.com/400/200';

 constructor() { }

 ngOnInit() {
 }

}

איך לקשור את תוכן התגית ב-HTML, באמצעות אנגולר

ישנה אפשרות נוספת להחליט על התוכן, באמצעות המאפיין [textContent]

זה נראה כך, והתוצאה היא שהטקסט שמוצג בתוך ה-span, הוא תוכן המשתנה.

<h4>Image URL : <span [textContent]="imageUrl"></span></h4>

איך לבצע הדלקה\כיבוי של פרמטרים בוליאנים באמצעו אנגולר

לעיתים יש מאפיינים בוליאנים של תגיות, כמו

  • "האם התגית צריכה להיות מוצגת או מוסתרת?"
  • האם הכפתור צריך להיות מאופשר או חסום ללחיצה ?

לצורך כך , נגדיר משתנה בוליאני , ונשייך אותו למאפיין המתאים :

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

@Component({
 selector: 'app-data-binding2',
 template: `
 
 <p [hidden]="!postChanged">Remmber to Save this post.</p>
 <button [disabled]="!postChanged">Save Post</button>

 `
})
export class DataBinding2Component implements OnInit {

 postChanged:boolean = false;

 constructor() { }

 ngOnInit() {
 }

}

שיעור 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>

 

שיעור 11 באנגולר (angular) – לולאות עם ngFor Directive

בפוסט הזה נראה כיצד לרוץ בלולאה באנגולר.

דוגמא 1 – לולאה פשוטה על מערך באנגולר , באמצעות ngFor*

לצורך בסיס לדוגמא הראשונה, נראה קודם כל איך אנגולר מציג לנו מערך רגיל, ללא לולאה.

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

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

@Component({
 selector: 'app-ngfor3',
 template: ` 
 The products are : {{ products }}
 `
})
export class Ngfor3Component implements OnInit {

 products:string[] = ['bread','milk','rice','water'];

 constructor() { }

 ngOnInit() {
 }

}

עכשיו, נניח ונרצה לרוץ בלולאה על המערך ולהציג אותו בנקודות.

לצורך כך נשתמש ב-ngFor.

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

התוצאה של זה תהיה תצוגה בנקודות של הרשימה .

להלן רק קטע הקוד שהשתנה :

 template: ` 
 <ul>
 <li *ngFor="let product of products">
 {{product}}
 </li>
 </ul>
 
 `

דוגמא 2 – לולאה עם 2 סמנים בו זמנית באנגולר, באמצעות ngFor*

אם נוסיף עוד סמן ללולאה, אפשר יהיה להוסיף את המספרים שלהם על יד כל נקודה. (הוספתי 1 כדי להתחיל מ-1 ולא מאפס).

 template: ` 
 <ul>
 <li *ngFor="let product of products;let i = index">
 {{ i+1 }} -> {{product}}
 </li>
 </ul>
 `

דוגמא 3 – לולאה על מערך של אובייקטים באנגולר, באמצעות ngFor*

בדוגמא הבאה, יש לנו מערך של אובייקטים, ואנחנו מציגים מאפיינים של האובייקט.

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

@Component({
 selector: 'app-ngfor3',
 template: ` 
 <ul>
 <li *ngFor="let product of products;let i = index">
 {{ i+1 }} -> {{product}}
 </li>
 </ul>

 <ul>
 <li *ngFor="let habbit of habbits">
 Habbit Name: {{habbit.Title}} | is it risky: {{ habbit.isRisky }}
 </li>
 </ul>
 `
})
export class Ngfor3Component implements OnInit {

 products:string[] = ['bread','milk','rice','water'];

 habbits = [
 {
 'Title': 'surf',
 'isRisky': 'Yes'
 },
 {
 'Title': 'smoke',
 'isRisky': 'Yes'
 }
 ];

 constructor() { }

 ngOnInit() {
 }

}

הערה לסיום – שינוי תוכן המערך לפני התצוגה על המסך

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

אם לדוגמא נשנה את רמת הסיכון של אחד התחביבים ברשימה, כמובן שזה ישתקף ברשימה על המסך.

 constructor() {
 this.habbits[1].isRisky = "No";
 }

 

 

שיעור 10 באנגולר (angular) – שימוש בקובץ תבנית חיצוני (html) ובקובץ עיצוב חיצוני (css).

בפוסט הזה נראה דוגמא פשוטה לשימוש בקובץ html+css חיצוניים (שזוהי ברירת המחדל שמיוצרת על ידי כלי angular cli).

קובץ ה-ts שלנו, מכיל את הגדרת ה-Component@ , שמכילה הפניות ל-2 קבצים חיצוניים.

להלן 3 הקבצים :

----------- TypeScript File ---------------------

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

@Component({
 selector: 'app-outside-files',
 templateUrl: './outside-files.component.html',
 styleUrls: ['./outside-files.component.css']
})
export class OutsideFilesComponent implements OnInit {

 constructor() { }

 ngOnInit() {
 }

}
--------- HTML file ---------
<p class="sss">
 outside-files works!
</p>
--------- CSS file ----------
.sss {
 background-color: yellow;
 color: red;
}

שיעור 9 באנגולר (angular) -אובייקטים ואינטרפייס עם TypeScript.

הפוסט הזה  מדגים את האפשרות ליצור אובייקטים עם TypeScript.

דוגמא 1 – משתנה מסוג אובייקט

כך נגדיר משתנה מסוג אובייקט

Person:{
 id:number,
 name:string,
 email:string
}

וכך נשים בו ערכים

this.Person = {
 id:887,
 name: 'Bubu',
 email: 'bubu@jjj.com'
 }

 

דוגמא 2 – שימוש ב-interface + מערך של אובייקטים.

את אותה הגדרה בדיוק, אפשר להפריד לקובץ נפרד, ולהגדיר אובייקט שמממש interface.

בקובץ נפרד נגדיר כך :

export interface Person {
 id:number,
 name:string,
 email:string
}


כעת בקובץ TypeScript שמכיל את המודל של ה-component :

  • נייבא את ה-interface
  • ולאחר מכן, נוכל להשתמש באינטרפייס שבנינו

בקומפוננט הבא אפשר לראות גם משתנה בודד שמוגדר ע"פ האינטרפייס, וגם מערך .

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

@Component({
 selector: 'sandbox3',
 template: `
 <p style="color:red;">Hello from SandBox3</p>
 `
})

export class Sandbox3Component{
 customer:Customer;
 customers:Customer[];

 constructor() {
 this.customer = {
 id: 1,
 name: 'Zuyyyyy',
 email: 'bubu@momo.com'
 }

 this.customers = [
 {
 id: 1,
 name: 'Zuyyyyy',
 email: 'bubu@momo.com'
 },
 {
 id: 2,
 name: 'bbdbdbdb',
 email: 'bfbfbf@momo.com'
 },
 {
 id: 3,
 name: 'ffffffd',
 email: 'rrd@momo.com'
 }
 ]
 }
}