כל הפוסטים של admin

שיעור 17 ב-ionic, שימוש ב toggleButton

כחלק מרכיבי ה-CSS של ionic , יש גם toggle button, כפתור דו מצבי נחמד.

בקוד הבא אפשר לראות :

  • שימוש בתגית ion-toggle, כדי לשים כפתור דו מצבי על המסך.
  • שימוש ב-[checked] על מנת לקשור אליו משתנה\פונקציה כדי שערכו ישמר.
  • על הדרך , אך ללא קשר, השתמשתי ב- ion-grid – שמאוד דומה לבוטסטראפ, וב-ion-label שמאפשר לשים תויות פשוטות ונחמדות.
<ion-content padding>
 <ion-grid>
 <ion-row>
 <ion-col>
 <ion-label>
 רקע שונה
 </ion-label>
 </ion-col>
 <ion-col>
 <ion-toggle 
 (ionChange)="onToggle($event)" 
 [checked]="checkAltBackground()" ></ion-toggle>
 </ion-col>
 </ion-row>
 </ion-grid>
</ion-content>

 

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

}


שיעור 16 ב-ionic – הוספת תפריט צד, שימוש ב MenuController

  • הוספת תפריט צד בנוסף לטאבים, היא מהלך מעט מורכב
  • אציין אותו שלב אחר שלב, ולבסוף אביא את הקוד
  • בתוך app.html נוסיף תגית ion-menu, ובתוכו את הכפתורים הרלוונטים.
  • התגית ion-menu צריכה לבוא עם הגדרה שאומרת לה "היכן להחליף את העמודים" , כדי להגדיר זאת
    • נוסיף לתגית ion-nav סימון רגיל של תבנית אנגולר, כלומר למשל #nav
    • ולתגית ion-menu נוסיף הגדרה [content]="nav"
  • כדי לתת מראה אחיד בתוך התפריט, נשתמש בתגית ion-list, כאשר לכל אחד מהכפתורים נוסיף הגדרת ion-item
  • כמובן צריך להוסיף אירוע click לכל אחד מהכפתורים ב app.component.ts
  • כדי לשלוט בתוך האירוע בעמוד שיוצג, שהוא למעשה עמוד ה-root,
    נשאלת השאלה – איך נקבע את עמוד ה-root ?
    הרי בשלב זה , אנחנו בתוך הקומפוננט הראשון, ה- app.html, אז אנחנו עדין לא יכולים להזריק את NavController, כיוון שהוא עדין לא נוצר ( למרות שיש לו דווקא מתודה נחמדה של setRoot שהייתה יכולה לעזור לנו).
    אז כדי לתת פתרון אחר למטרה שלנו להחליף את עמוד ה-root , אנחנו נשתמש בפונקציה של אנגולר שנקראת ViewChild@,  זו שיטה באנגולר שבה אפשר לגשת לתבנית מסויימת, אחרי שהיא נוצרה, במקרה שלנו, אנחנו ניגש לתפריט אחרי שהוא נוצר, ושם כמובן, נוכל לגשת ל-NavController ולהשתמש במתודה שתאפשר לנו  להגדיר את ה-root.
    כלומר זהו פתרון עוקף שיאפשר לנו להשתמש ב-nav controller.
    הפתרון הזה מתואר בדוקמונטציה בקישור הזה.
  • אחרי שהמשתמש לוחץ על כפתור, אזי אנחנו צריכים לסגור את התפריט, לצורך כך נשתמש באובייקט MenuController, ספציפית במתודה שלו close.
  • כדי להוסיף בעמודים השונים (pages) את סימן התפריט, נוסיף כפתור , עם icon מובנה של ionic שנקרא menu.
  • את הכפתור ב-html, כדאי לעטוף בתגית של ionic שמיועדת לסידור של כפתורים בשורה. היא נקראת ion-buttons, ואפשר להוסיף לה את המאפיין start או end כדי להחליט האם הכפתור ישב בצד ימין או שמאל.
  • כדי להקפיץ את התפריט, נזריק לקלאס הרלוונטי את MenuController , ונשתמש במתודה שלו שנקראת open.
  • אך זה יכול להיות מעצבן מאוד, לו נצטרך בכל עמוד להוסיף את הכפתור, וליצור מתודה עבורו, לצורך כך ישנו קיצור דרך : להוסיף לכפתור התפריט את ההגדרה menuToggle . ואז לא צריך ליצור מתודה, ולייבא וכו'…
---- app.html file -----------------

<ion-menu [content]="nav" >
 <ion-header>
 <ion-toolbar>
 <ion-title>Menu</ion-title>
 </ion-toolbar>
 </ion-header>
 <ion-content>
 <ion-list>
 <button (click)="onLoad(tabsPage)" ion-item>
 <ion-icon name="quote" item-left></ion-icon>
 Quotes
 </button>
 <button ion-item (click)="onLoad(settingsPage)">
 <ion-icon name="settings" item-left></ion-icon>
 Settings
 </button>
 </ion-list>
 </ion-content>
</ion-menu>

<ion-nav [root]="tabsPage" #nav ></ion-nav>



------- app.component.ts file ---------------------

import { Component, ViewChild } from '@angular/core';
import { Platform, NavController, MenuController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from './../pages/tabs/tabs';
import { SettingsPage } from './../pages/settings/settings';

@Component({
 templateUrl: 'app.html'
})
export class MyApp {
 //rootPage:any = TabsPage;
 tabsPage:any = TabsPage;
 settingsPage:any = SettingsPage;
 @ViewChild('nav') nav:NavController;

 constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen
 ,private mnuCtrl:MenuController) {
 platform.ready().then(() => {
 // Okay, so the platform is ready and our plugins are available.
 // Here you can do any higher level native things you might need.1
 statusBar.styleDefault();
 splashScreen.hide();
 });
 }

 onLoad(page:any) {
 this.nav.setRoot(page);
 this.mnuCtrl.close();
 }
}

--------- בכל דף שבו מעוניינים בתפריט נוסיף משהו דומה -------------


<ion-header>

 <ion-navbar>
 <ion-buttons end >
 <button ion-buton menuToggle >
 <ion-icon name="menu"></ion-icon>
 </button>
 </ion-buttons>
 <ion-title>favorites</ion-title>
 </ion-navbar>

</ion-header>

 

שיעור 15 ב-ionic – יכולת slide מובנית לפריטי רשימה

תכונה מעניינת ב-ionic, היא שבמידה ואנחנו מציגים אלמנטים ברשימה, אפשר להציג אותה עם יכולת "הזזה" הצידה, ואז בהזזה להציג אפשרויות נוספות ( כפתורים וכדומה).

כדי לעשות זאת, אנחנו צריכים לעטוף את אלמנט ion-item, באלמנט ion-item-sliding.

במידה ונרצה להכניס כפתורים וכדומה שמופיעים רק בעת ה-slide, נכניס אותם בתוך ion-item-options.

אז המבנה הבסיסי הוא :

  • ion-list
    • ion-item-sliding — בדרך כלל עם *ngFor
      • ion-item
      • ion-item-options

להלן דוגמא פשוטה :

<ion-header>

 <ion-navbar>
 <ion-title>favorites</ion-title>
 </ion-navbar>

</ion-header>


<ion-content padding>
 <ion-list>
 <ion-item-sliding *ngFor="let quote of quotes">
 <ion-item 
 (click)="onViewQuote(quote)"
 >
 <h2>{{quote.person}}</h2> 
 <p>{{quote.text}}</p>
 </ion-item>
 <ion-item-options>
 <button
 ion-button
 color="danger"
 (click)="onRemoveFromFavorites(quote)">
 <ion-icon name="trash"
 
 >Delete</ion-icon>
 </button>
 </ion-item-options>
 </ion-item-sliding>
 </ion-list>
</ion-content>

 

שיעור 14 ב- ionic – חלון קופץ Modal

כדי להציג חלון קופץ, מה שנקרא Modal, נעשה כך :

  • נייבא את ModalController
  • נוסיף לקונסטרקטור משתנה מסוג ModalController
  • בפונקציה המתאימה, נקרא  למתודה create של ModalController, ונעביר לה כפרמטר את הקלאס של page שאנחנו רוצים להציג כחלון קופץ.
  • וכדי להציג, נשתמש במתודה present.

המחשה –

בדוגמא הבאה, הדף שאני מציג בתור חלון קופץ, נקרא QuotePage :

import { Component } from '@angular/core';
import { IonicPage, ModalController} from 'ionic-angular';
import { QuoteService } from './../../services/quote.service';
import { Quote } from './../../data/quote.interface';
import { QuotePage } from './../quote/quote';

@IonicPage()
@Component({
 selector: 'page-favorites',
 templateUrl: 'favorites.html',
})
export class FavoritesPage {
 quotes:Quote[];

 constructor(private quotesService:QuoteService,
 private modalCtrl:ModalController) {
 }

 ionViewDidLoad() {
 
 }
 ionViewWillEnter(){
 this.quotes = this.quotesService.getFavoriteQuotes();
 }

 onViewQuote(quote:Quote) {
 const modal = this.modalCtrl.create(QuotePage);
 modal.present();
 }


}

 

אלא שיש בעיה קטנה …

אם נציץ בתצוגת mobile, בחלון הקופץ שבנינו, נראה שאנחנו לא יכולים לצאת ממנו.

כדי ליצור פונקציה שסוגרת, עם אירוע, וכו', נשתמש במחלקה של ionic שאחראית על ה-View המוצג ברגע זה, מחלקה זו נקראת ViewController.

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

המתודה שנשתמש בה היא dismiss, וכשמה כן היא – היא פשוט סוגרת את ה-view האקטיבי. (צריך להיזהר לא להפעיל אותה על root page 🙂 )

------ on the html file ------------


 <button ion-button color="danger"
 (click)="onClose()"
 >Close</button>

------ on the TS file --------------


import { Component } from '@angular/core';
import { IonicPage, ViewController } from 'ionic-angular';


@IonicPage()
@Component({
 selector: 'page-quote',
 templateUrl: 'quote.html',
})
export class QuotePage {
 constructor(private viewCtrl:ViewController) {}

 onClose() {
 this.viewCtrl.dismiss();
 }

}

איך להעביר מידע לחלון הקופץ ?

  • את המידע אנחנו מעבירים בפרמטר השני של יצירת האובייקט .
  • ואנחנו שולפים את המידע ( בעמוד הנפרד של החלון הקופץ )  דרך אובייקט navParams שאותו כבר הכרנו באחד השיעורים הקודמים
  • נקודה מעניינת לשים לב, היא שאני שולף את המידע באירוע המיוחד של ionic שנקרא ionViewDidLoad , והאירוע הזה מתרחש כל פעם מחדש, ולא נעשה לו cache.
העברת המידע בפרמטר השני



onViewQuote(quote:Quote) {

constmodal=this.modalCtrl.create(QuotePage,quote);

modal.present();

}

שליפת המידע בקלאס של הדף חלון שקופץ
ionViewDidLoad(){this.person=this.navParams.get('person');
this.text=this.navParams.get('text');
}

 העברת מידע מהחלון הקופץ, בחזרה אל החלון שהקפיץ אותו

  •  כדי לבצע זאת, נעביר פרמטר במתודה dismiss שסוגרת את החלון הקופץ
  • כדי לשלוף את הפרמטר שהעברנו , בחלון שהקפיץ , "נאזין" לאירוע הסגירה של ה-modal, באמצעות onDidDismiss, ושם נגדיר callback שמקבל פרמטר , וזהו הפרמטר שהעברנו מהחלון הקופץ.
  • חשוב לזכור ! העמוד שמתחת ל-modal לא מתרענן לאחר שה-modal נסגר, זאת אומרת שאם ביצענו דרך ה-modal שינוי כלשהוא שאמור להשפיע על הדף שמתחתיו – אז צריך לדאוג לבצע את השינוי (או לרענן את הדף).
----- on the modal page TS file -------

onClose(remove = false) {
 
 this.viewCtrl.dismiss(remove);
 
 
 }
 
 
----- on the under-laying page TS file -----
 onViewQuote(quote:Quote) {
 const modal = this.modalCtrl.create(QuotePage,quote);
 modal.present();
 modal.onDidDismiss((remove:boolean) =>{
 if(remove) {
 this.quotesService.removeQuoteFromFavorites(quote);
 }
 
 } );
 }

 

מילה על view hooks

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

}

שיעור 13 ב-ionic – הודעות למסך alert

ב-ionic יש רכיב מובנה של alert, כדי לעבוד איתו :

  • נזריק לקונסטרקטור משתנה מסוג AlertController
private alertCtrl:AlertController
  • אם עורך הקוד לא השלים לבד , אז לוודא שיש יבוא import של – AlertController
  • בפונקציה שבה אנחנו רוצים להקפיץ את ההודעה, ניצור אובייקט מסוג AlertController  בתוך משתנה, כאשר מעבירים פנימה פרמטרים של ההודעה הקופצת.
    למשל
const alert = this.alertCtrl.create({
title : "Hi", subTitle : "mooo", message:"bzzzz"});

alert.present();

  • אם נרצה להוסיף כפתורים להודעה הקופצת, אז נוסיף מערך של כפתורים
const alert = this.alertCtrl.create({
title : "Hi", subTitle : "mooo", message:"bzzzz"
,buttons : ['Ok']});

alert.present();


אם נרצה להעביר כפתורים, עם יותר שליטה בפרמטרים, אפשר להעביר אובייקטים, לדוגמא :

const alert = this.alertCtrl.create({

title:"fff",

subTitle:"sdfsdf"

,message: "sdfdfssdf",

buttons: [

{ text: 'Ok',

handler: () => {

console.log('ok');

}},

{

text:'cancel',

handler: () => {

console.log('cancel');

}

}

]

});

 

alert.present();


אפשר להוסיף לאחד מהאובייקטים של הכפתורים, מאפיין role=cancel, מה שזה יגרום הוא , שגם אם מישהו לחץ על איזור אחר בדף, כדי לסגור את ההודעה הקופצת, אבל לא לחץ על כפתור ה-cancel שלנו, אז בכל מקרה האירוע handler שהגדרנו עבור יציאה – יופעל.

 

שיעור 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 – כאשר מסמנים ואז מנסים לגרור משהו מעל האלמנט הנוכחי.

 

שיעור 12 ב-ionic – רכיבי CSS של ionic – כרטיסים (cards) ורשת (grid)

בתוך ionic יש הרבה רכיבי CSS מובנים, אחד מהם הוא Cards, שמאפשר לעטוף בריבוע נאה כל מיני אלמנטים.

נדגים על לולאה שמציגה מערך כלשהוא :

<ion-cardpadding *ngFor="let quote of quoteGroup.quotes;let i = index">

<ion-card-header>

#{{ i+1 }}

</ion-card-header>

<ion-card-content>

{{quote.text}}

</ion-card-content>

</ion-card>

רכיבי CSS מובנים ב-IONIC – גריד, וכרטיס

בדומה ל- twiter bootstrap, ל- ionic , יש מערכת גריד, שמתאימה למובייל, וגם עיצובים שונים.

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

<ion-header>

 <ion-navbar>
 <ion-title>{{quoteGroup.category}}</ion-title>
 </ion-navbar>

</ion-header>


<ion-content padding>

 <ion-card padding *ngFor="let quote of quoteGroup.quotes;let i = index">
 <ion-card-header>
 #{{ i+1 }}
 </ion-card-header>
 <ion-card-content>
 <p> {{quote.text}}</p>
 <p>{{quote.person}}</p>
 </ion-card-content>
 <ion-row>
 <ion-col text-right>
 <button ion-button clear small
 (click)="onAddToFavorite(quote)"
 >Favorite</button>
 </ion-col>
 </ion-row>
 </ion-card>
 <ul>
 
 <li *ngFor="let singleQuote of quoteGroup.quotes">
 {{singleQuote.person}} : {{singleQuote.text}}
 </li>
 </ul>
 
</ion-content>

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

}