ארכיון תגיות: 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() {
 }

}

שיעור 9 ב- ionic, שליטה בעיצוב הדף

כדי לשלוט בעיצוב, ionic משתמשת בקובץ scss, עבור כל עמוד בנפרד.

כאשר, בנוהל הרגיל של scss, אפשר לשרשר הגדרות בהיררכיה מסויימת.

איך זה מתקמפל ?

בזמן שנריץ, אז ionic תאחד את כל קבצי ה-scss, אל קובץ css אחד גדול

  • מה נגזר מכך ?
    • שאם נשים הגדרת css מחוץ לסוגרים שקשורים לעמוד , אז הם יהיו למעשה הגדרת css כוללת, שתוחל על כלל העמודים.

המחשה

התוצאה של קטעי הקוד הבאים, תהיה תגית p בצבע רקע אדום , רק בתוך עמוד ה-users.

 --- In the HTML file -----
 
 <p>Hi Man</p>
 
 
 --- In the scss File ----
 page-users {
 p {
 background-color: red;
 }
}

הגדרות כלליות של תבנית העיצוב ב-ionic

תחת תיקית theme, נמצא קובץ variables , ובו יש הגדרות כלליות של הצבעים, אפשר לשנות ולראות

$colors: (
 primary: #848484,
 secondary: #32db64,
 danger: #f53d3d,
 light: #f4f4f4,
 dark: #222
);

 

שיעור 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() {
 }

}

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