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

}

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

שיעור 6 ב- ionic – מימוש כפתור חזרה לאחור

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

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

  • הוספתי הזרקה של navController, וכמובן גם import מתאים.
  • מימשתי כפתור בקובץ ה-HTML.
  • מימשתי פונקציה עבור הכפתור בקובץ ה-Type Script.
קובץ ה-html
--------------------
<ion-header>
<ion-navbar>
<ion-title>MyTitle</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<p>שמי הוא {{ name }}</p>
<buttonion-button (click)="onGoBack()">Go Back</button>
</ion-content>


--------------
קובץ ה-ts
-------------
import { Component, OnInit } from '@angular/core';

import { NavParams, NavController } from 'ionic-angular';

@Component({

selector:'page-user',

templateUrl:'user.html'

})

export class UserPage implements OnInit {

name:string;

constructor(privatenavParams:NavParams,privatenavCtrl:NavController) {

}

ngOnInit() {

this.name=this.navParams.get("userName");

}

onGoBack() {

this.navCtrl.pop();

}

}

חזרה לעמוד הראשי ב- ionic

לאובייקט navController יש מתודה נחמדה שנקראת popToRoot והיא מסירה את כל העמודים, עד לעמוד הראשי – שימושי ביותר.

 

שיעור 5 ב- ionic – העברת מידע בין דפים.

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

לצורך ההמחשה נדגים באמצעות דף שנקרא users (לשון רבים) , שמכיל 2 כפתורים, כל אחד מהם יעביר אותנו דף user (לשון יחיד) עם מידע על משתמש ספציפי.

כך זה נקרא בהתחלה :

<ion-content padding>

     <buttonion-button>User A</button>

     <buttonion-button>User B</button>

</ion-content>

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

  • נוסיף אירוע לכפתורים, שמעביר פרמטר של שם המשתמש
  • נבנה את הקוד שמטפל באירוע בקלאס של הקומפוננט (users). – כלומר הקוד שמעביר  את המידע הלאה.
  • נבנה את הקוד שמטפל באירוע בקלאס של הקומפוננט המקבל (user) – כלומר הקוד שמקבל את המידע.

הערה :  אני מניח שבניתם את הדף הקודם, כלומר יש בו כבר data binding  למשתנה name בתוך תבנית ה-html של העמוד user. (קישור לפוסט הקודם).

שלב 1/3 – הוספת אירוע לכפתורים

בקובץ users.html נגדיר אירוע

<ion-content padding>

<buttonion-button (click)="onLoadUser('A')">User A</button>

<buttonion-button (click)="onLoadUser('B')">User B</button>

</ion-content>

שלב 2/3 – הקוד ששולח את המידע

בקובץ users.ts  , הוספתי יבוא לדף ה-user, וכתבתי פונקציה ששולחת  אליו מידע בתוך אובייקט.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { UserPage } from './user/user';

@IonicPage()
@Component({
 selector: 'page-users',
 templateUrl: 'users.html',
})
export class UsersPage {

 constructor(public navCtrl: NavController, public navParams: NavParams) {
 }

 onLoadUser(name:string) {
 this.navCtrl.push(UserPage, {userName: name});
 }


 ionViewDidLoad() {
 console.log('ionViewDidLoad UsersPage');
 }

}

שלב 3/3 – הקוד שמקבל את המידע

  • בקובץ user.ts , הוספתי יבוא ל- OnInit, וגם ל- NavParams.
  • בנוסף מימשתי את קבלת המידע בפונקציה ngOnInit.
import { Component, OnInit } from '@angular/core';
import { NavParams } from 'ionic-angular';

@Component({
 selector: 'page-user',
 templateUrl: 'user.html'
})

export class UserPage implements OnInit {
 name:string;
 constructor(private navParams:NavParams) { 
 }

 ngOnInit() {
 this.name = this.navParams.get("userName");
 }

}

סיכום

  • בקריאה לאירוע העברנו פרמטר לפונקציה.
  • בקובץ שמטפל באירוע
    • עשינו import ל- navController.
    • עשינו import ל- navParams.
    • הזרקנו פנימה את navController + navParams דרך ה constructor.
    • הפונקציה שטיפלה בדחיפה (push) של עמוד ה-user, גם העבירה פרמטר יחד עם פעולת ה-push.
  • בקובץ שמטפל בקבלת האירוע ובטעינת הדף הפנימי 
    • עשינו import ל- navParams.
    • עשינו import ל-OnInit.
    • הוספנו בקלאס הצהרה שהוא ממשק את האינטרפייס : implements OnInit.
    • הזרקנו פנימה את navParams דרך ה-constructor.
    • מימשנו פונקציה של ngOnInit.
    • בתוך הפונקציה קיבלנו את התוכן מתוך המשתנה (שהזרקנו) של navParms.

הערה

כמו ששלחנו מידע באובייקט, והשתמשנו במתודה get, כדי לשלוף ערך לפי ה-key של המאפיין בתוך האובייקט.

יכולנו לשלוח גם מידע במשתנה רגיל (כלומר לא אוביקט )  ופשוט לשלוף אותו באמצעות המאפיין navParams.data.

שיעור 8 באנגולר (angular) – טיפול במידע עם Data Binding

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

בפוסט הזה אראה מספר דוגמאות בסיסיות כיצד קושרים מידע ממחלקת ה-component (קובץ ts)  אל תבנית ה-html שמופיע תחת template, או תחת הקובץ שצויין תחת templateUrl.

דוגמא 1 – Data Binding של משתנים פרימיטיבים באנגולר

  • ניצור component חדש לצורך הדוגמא באמצעות ה-cli
ng g component components/a_sandbox1
  • בתוך המחלקה (של ה-component) נגדיר 2  משתנים
export class ASandbox1Component implements OnInit {

name='Bob';

age=37;
  • כעת בתוך התבנית html של הקומפוננט, "נקשור" את 2 המשתנים אל תוך התבנית.
@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.`,
  • כדי לראות את התוצאה – צריך לזכור כמובן להכניס את ה-selector אל תוך ה- app.component.html.
  • התוצאה – בכל פעם שתוכן המשתנים ישתנה – הם ישתנו אוטומטית על המסך, ללא צורך באף שורת קוד מצידנו. מספיק שקשרנו אותם פעם אחת, ומרגע זה התבנית html שלנו הפכה להיות דינמית, "חיה" ומגיבה לשינויים בתוכן המשתנים.

 

דוגמא 2 – Data Binding של אובייקטים באנגולר

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

  • נוסיף אוביקט למחלקה
  • נקשור אותו אל תוך התבנית
  • ואותה תוצאה בדיוק – התבנית הפכה להיות חיה ונושמת.
@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.

<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>

`,

styleUrls: ['./a-sandbox1.component.css']

})

export class ASandbox1Component implements OnInit {

name='Bob';

age=37;

candy= { "color":"yellow" , "taste":"sweet"};

דוגמא 3 – חצי מילה על מחזור חיים של משתנה

כמו כל שפה מונחית עצמית, גם type script מכילה פונקצית constructor.

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

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

@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.

<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>

`,

styleUrls: ['./a-sandbox1.component.css']

})

export class ASandbox1Component implements OnInit {

name='Bob';

age=40;

candy= { "color":"yellow" , "taste":"sweet"};

constructor() {

this.age=45;

}

 

דוגמא 4 – Data Binding אל פונקציה.

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

שימו לב לדוגמא הבאה :

@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.

<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>

<p>again...My age is {{ giveMeAge() }}</p>

`,

styleUrls: ['./a-sandbox1.component.css']

})

export class ASandbox1Component implements OnInit {

name='Bob';

age=40;

candy= { "color":"yellow" , "taste":"sweet"};

constructor() {

this.age=45;

}

giveMeAge() {

returnthis.age;

}

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

 

 

 

שיעור 7 באנגולר (angular) – פתיחת קומפוננט (component) חדש באופן ידני

בפוסט הזה אציג כיצד לפתוח component חדש באופן ידני.

  • מעורך הקוד נפתח, לצורך הסדר הטוב, תיקיה חדשה בתוך src, ונקרא לתיקיה החדשה components
  • בתוך התיקיה החדשה נפתח תיקיה עבור ה-component החדש שלנו, שנקרא לה tryComponent.
  • בתוך תיקיית tryComponent נפתח קובץ TypeScript חדש, ונקרא לו tryComponent.component.ts
  • בתוכו בשורה הראשונה נייבא את המודול Component מתוך הליבה של אנגולר.
import { Component } from '@angular/core';
  • לאחר מכן,  נרשום את ה-Decorator הבא, שבו נגדיר מה יהיה שם התגית, שבה נשתמש כדי להציג את ה-Component שאנחנו יוצרים כעת, וגם נגדיר את תוכן הקומפוננט:
@Component({

selector:'app-tryComponent',

template:`<h1> Hello from our new Component </h1>`

})
  • כעת, נייצא מחלקה החוצה, בשלב זה היא תהיה ריקה מתוכן.
    ונקפיד ששם המחלקה יכלול בסופו את המילה Component :
export class TryComponent{

}

  • נשמור את הקובץ
  • נפתח את הקובץ app.component.html, נמחק את כל התוכן בו, ונשים בתוכו רק את ה-selector שבחרנו עבור הקומפוננט החדש שלנו
<app-tryComponent></app-tryComponent>
  • אם נבדוק כעת (בהנחה שאנחנו משתמשים ב-ngServe שמקמפל את הקבצים אוטומטית)
    נראה שבינתיים זה עדין לא עובד.
    כדי שזה יעבוד אנחנו צריכים ליבא את הקומפוננט החדש.
    נעשה זאת באמצעות 2 פעולות  שנעשה בקובץ app.module.ts (לשם כך צריך לפתוח את הקובץ כמובן 🙂 ) :
  • נוסיף בראש הקובץ משפט ליבוא של הקומפוננט החדש שלנו :
import {TryComponent } from './components/tryComponent/tryComponent.component';
  • ובמערך שנקרא  declarations , נוסיף את שם המחלקה שיצאנו, כלומר TryComponent .

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

למי שצריך, אז הקומפוננט במלואו נראה כך :

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

@Component({

selector:'app-tryComponent',

template:`<h1> Hello from our new Component </h1>`

})

export class TryComponent{

}