Angular telepítése-ha még nincs a gépen Angular ▼

Telepítés VSC Terminalban(TS telepítése kötelező!):

npm install -g @angular/cli
Telepítés ellenőrzése: ng –help
Verziószám ellenőrzés: ng version

HA nem indul el, az ng.ps1 fájlt törölni kell innen: C:\Users\< username >\AppData\Roaming\npm

Ha már telepítve van az Angular: ▼

1. Új mappa létrehozása:

ng new routingDataBindingBs

2. Boostrap telepítés: navigáljunk (a 1.pontban) telepített mappába

npm install bootstrap@5.2.3

3. BS -"styles": [ ],:

itt a BS töltődjön be először, utána a saját css-e:

"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"

4. JS (angular.json / scripts: )
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

ha nincs JS src/ styles.css szerkesztése, ide illesztenia kódot-

@import
'../node_modules/bootstrap/dist/css/bootstrap.min.css';

// ha más nevet adunk a style.css-nek,akkor az angular json-ben is át kell nevezni a styles-nél. Ezt használjuk, ha csak a kinézet kell, ennél a projektnél ezt próbáljuk ki.

5. BS Telepítés ellenőrzés app/app.component.html –ben:

< div class="container mt-5">
< button class="btn btn-primary">Teszt gomb< /button>
< /div>

6. app.component.html - törlése, navbar/menü kialakítás, menüpontok(href=link vagy href=/home)hozzáadása

Fontos: < /router-outlet > ez a sor szerepeljen a app.component.html-ben,
nélküle nem működik a routing  app.component.html aljára rakjuk!!!

HTML menü kódja:

< nav class="navbar navbar-expand-lg navbar-dark bg-dark">
< div class="container-fluid">
< a class="navbar-brand" href="/home">
< img width="40" alt="Angular Logo"
src=" ........" />
< /a>
< button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
< span class="navbar-toggler-icon">< /span>
< /button>
< div class="collapse navbar-collapse" id="navbarSupportedContent">
< ul class="navbar-nav me-auto mb-2 mb-lg-0">
< li class="nav-item">
< a class="nav-link active" aria-current="page" href="/home">Főoldal< /a>
< /li>
< li class="nav-item dropdown">
< a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Feladatok
< /a>
< ul class="dropdown-menu">
< li>< a class="dropdown-item" href="/rectangle">Téglalap kerület, terület< /a>< /li>
< li>< a class="dropdown-item" href="/bmi">Testtömegindex< /a>< /li>
< li>< hr class="dropdown-divider">< /li>
< li>< a class="dropdown-item" href="/productGrossPrice">Termék bruttó ár számítás< /a>< /li>
< li>< a class="dropdown-item" href="/triangle">Háromszög szerkeszthetőség< /a>< /li>
< li>< a class="dropdown-item" href="/oddEven">Páros/páratlan vizsgálat< /a>< /li>
< /ul>
< /li>
< li class="nav-item">
< a class="nav-link" href="https://angular.io" target="_blank">Angular segédlet< /a>
< /li>
< /ul>
< /div>
< /div>
< /nav> < /div>

Menü 2

app/app.component.html oldalán állítható be. Aloldalt / jel után adjuk meg. Pl. href="/home" , href="/contact"
Az itt megadott tartalom az összes oldalon látható lesz!

< div class="container mt-5">
< nav>
< a class="btn btn-primary m-2" href ="/sample">Minta< /a>
< a class="btn btn-secondary m-2" href ="/example">Feladat< /a>
< a class="btn btn-info m-2" href ="/notfound">404< /a>
< /nav>
< /div>

Dropdown menü

< li class="nav-item dropdown" >
< a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Feladatok
< /a>
< ul class="dropdown-menu" >
< li>< a class="dropdown-item" href="/rectangle">Téglalap kerület, terület< /a >< /li >
< li>< a class="dropdown-item" href="/bmi">Testtömegindex< /a >< /li >
< li>< hr class="dropdown-divider">< /li >
< li>< a class="dropdown-item" href="/productGrossPrice">Termék bruttó ár számítás< /a >< /li >
< li>< a class="dropdown-item" href="/triangle">Háromszög szerkeszthetőség< /li >
< li>< a class="dropdown-item" href="/oddEven">Páros/páratlan vizsgálat< /li >
< /ul>
< /li >

7. TS/ componensek létrehozása - a menüben megaditt hrefből ng g c home paranccsal(menüpontok, domain végződés../home):

ng generate component sample
ng g c example //a - ng generate component sample - rövidítése//
ng g c notFound //404-es oldal létrehozása

8. routes beállítások -src/ app.routes.ts szerkesztése - az osszes létrehozott komponenst ide beírni:

-amíg ez üres, nem fog működni egy elérési útvonal sem!
(** a végére rakjuk, if-else-hez hasonlóan működik, (fontos a )sorrend:
url-ek, redirect és végül **)

const routes: Routes = [
{path: 'sample', component:SampleComponent},
{path:'example', component:ExampleComponent},
{path:'notfound', component:NotfoundComponent},
{path: '', redirectTo:'/sample', pathMatch: 'full' }, //ha nincs beállítva URL, akkor mindent a sample-re irányít - nem adunk meg path-t
{path: '**', component: NotFoundComponent} //érvénytelen URL-re irányít - NotFoundComponent-ra
];

9. 404 beállítása

< div class="d-flex align-items-center justify-content-center vh-100">
< div class="text-center">
< h1 class="display-1 fw-bold">404< /h1>
< p class="fs-3"> Hopááá! Nem található az oldal.< /p>
< p class="lead">
Az oldal nem található :(
< /p>
< a href="/home" class="btn btn-primary">Főoldal< /a>
< /div>
< /div>

Egy kis elmélet: ▼

Adatkötés - data binding
támogatja a kétirányú adatkötést, amely lehetővé teszi az adatok dinamikus és gyors frissítését a felhasználói felületen. Az alkalmazás állapota és a megjelenített adatok mindig szinkronban lehetnek.
Modulok és függőséginjekció (Dependency Injection):
modulokra épül, amelyek elkülönített funkcionalitási egységek az alkalmazáson belül. Az alkalmazás komponensei, szolgáltatásai és más osztályai modulokba vannak szervezve.
A beépített függőséginjekciós rendszere lehetővé teszi a komponensek számára, hogy más osztályokat és szolgáltatásokat használjanak, amelyeket a modulokon keresztül injektálnak.

Router (Útválasztás):
beépített útválasztó modult biztosít az alkalmazás oldalai közötti navigációhoz. Az útválasztó lehetővé teszi az URL-alapú útválasztást,
amelynek eredményeként az alkalmazás különböző oldalaira lehet irányítani a felhasználót. Amikor a felhasználó egy adott útvonalra navigál az alkalmazásban (például a "/home" útvonalra), akkor az Angular a hozzárendelt
komponenst fogja betölteni és megjeleníteni a felhasználó számára.

Tesztelhetőség:
a keretrendszer beépített tesztelési támogatást biztosít. Az egységtesztelés és az integrációs tesztek írása és végrehajtása egyszerű és hatékony.
Lépések:

src – forráskódoknak a helye assets: megjelenítéshez szükséges külső könyvtárakat jelenítjük meg itt main.ts – program belépési pontja

1. telepítés
2. ng serve – server elindítása. Abban a mappában adjuk ki a parancsot, ahova telepítettük az angulart
3. app component.html -ből a router outlet-en kívül mindent törölni
4. BS telepítés – npm install bootstrap@5.2.3

Databinding - Adatkötés: minta oldal

először TS-ben kell a változtatásokat megcsinálni, utána html

Interpoláció(egyszerű értékadás)

-létrehozunk egy TS változót,annak adunk egy érétéket, amit megjlelenítünk a html-en: Legegyszerűbb módja a TS változó elérésének.

< p class="fw-bold">Az oldal készítője: {{Author}}< /p>

Link: < a href="{{AngularUrl}}" target="_blank">Angular honlap - Interpoláció< /a >

Lépések röviden

Interpoláció(vid. 36/1.30):
1. TS/ komponensen belül létrehozni egy privat változót (kisbetűvel írva)
2. TS/ getter beállítása- ahol nem lesz módosítva a változó(pl kiírásoknál) ott elég csak gettert beállítani -getter lekérdez, setter beállít
3. TS/ setter beállítása - setter nélkül readonly, csak olvasható lesz!
4. HTML/: {{ privat valtoz beírása,nagybetűvel }} - pl AZ olal készítője{{Author}}

Hogy kell kinéznie? TS

Setter:

public set Author(value: string){
this.author = value;

public set A(value:number) { this.a = value; } }

Getter:

public get Author(): string {
return this.author;
}
public get A():number { return this.a; }

privát változó példa:

export class RectangleComponent {
private a:number = 1;
private b:number = 1;
private author:string = 'Bettike';
}

FV.:
public getPerimeter():number {
return (this.a +this.b)*2;
}

public getArea():number {
return this.a *this.b;
}

Property Binding(tulajdonság kötés)

szorosabb összekötés

Van egy html elem/tulajdonsága, ami megkap egy értéket. A tulajdonságot szögletes zárójelbe tesszük. [property]="value" -- property:
a html elem tulajdonsága(pl class, target,href,id. Inputnál lehet type , name ,id,class tulajdonság, stb), érték
< a [href]="AngularUrl" target="_blank">Angular - property binding< /a>

Lépések röviden

Property binding
1. HTML/ < a [href ] = getAngularUrl()” < /a> vagy button[disabled]=”true”
2. TS / komponens / isDisabled=false;
3. TS /setter
4. TS/ getter

Setter:

public set Author(value: string){
this.author = value;
}

Getter:

public get Author(): string {
return this.author;
}

Event Binding(esemény kötés)

majd onclick eseményt összekötünk egy TS működéssel

Ha bekövetkezik egy esemény, akkor meghívunk egy függvényt. Pl onclick. Szintaxis:

< button class="btn btn-primary m-2" (click)="sendMessage()">Event binding - üzenet küldés< /button>
< button class="btn btn-warning m-2" (click)="changeAuthor()">Event binding - készítő módosítás < /button>

Lépések röviden

Event binding
1. HTML/ button gomb létrehozása
2. TS/publikus metódus létrehozása (pl sendMessage() )
3. HTML/ Onclick esemény létrehozása a gomboz) pl. (click)= ”sendMessage”

Lépések:

1. html kialakítás - gomb elkészítés

2. ( click)="fv.név()"

3. fv megírása: public sendMessage(): void alert('Event binding- fv hívás');
public changeAuthor():void this.author = 'Ersching Bettina';
public get ASide():number return this.aSide;

Two way Data Binding(Kétirányú adatkötés)

szoros kapcsolat van a beviteli mező és a TS-között.Input mezőn beadott szöveget érzi a TS is, dinamikusan kezelhető a változás

1.űrlapra van szükség - ehhez a TS/component-en belül be kell importálni a Forms nevét az imports[ ]-hoz!!! imports[FormsModule]-enélkül nem kezelhető az importálás!!

< label for="aSide">A oldal < input type="number" [(ngModel)]="ASide " name="aSide" id="aSide" class="form-control"> < /form>

A négyzet oldalának mérete: {{ASide}}

A négyzet kerülete: {{ASide*4}}

A négyzet területe: {{getArea()}}

Form 2

< div class="container mt-5 w-25">< /div>
< h2 class="text-center">{{Title}}< /h2>
< form>
< div class="form-control">
< label for="Height">Magasság (cm)< /label>
< input type="number" [(ngModel)]="Height" class="form-control" name="Height" id="Height">
< label for="Weight">Súly (kg):< /label>
< input type="number" [(ngModel)]="Weight" class="form-control" name="Weight" id="Weight">
< div class="text-center">
< button class="btn btn-success m-2" (click)="showBmiAlert()"> Számol < /button>
< /div>
< /div>
< /form>
< /div>
< /div>

Példa property binding - interpoláció - HTML:

< div class="container mt-5 w-25">
< form>
< div class="form-control">
< label for="A">A oldal:< /label>
< input type="number" [(ngModel)]="A" class="form-control" name="A" id="A">
< label for="B">B oldal:< /label>
< input type="number" [(ngModel)]="B" class="form-control" name="B" id="B">
< /div>
< /form>
< div class="alert alert-success mt-5" role="alert">
< p>A téglalap kerülete: {{ getPerimeter() }}< /p>
< p>A téglalap terület: {{ getArea() }}< /p>
< p>A téglalap terület(másként - nem javasolt): {{(A*B)}}< /p>
< /div>
< /div>

TS hozzá:

export class RectangleComponent {
private a:number = 1;
private b:number = 1;
public get A():number {
return this.a;
}
public set A(value:number) {
this.a = value;
}
public get B():number {
return this.b;
}
public set B(value:number) {
this.b = value;
}
public getPerimeter():number {
return (this.a +this.b)*2;
}
public getArea():number {
return this.a *this.b;
}

Lépések röviden

Kétirányú adatkötés
1. TS/ komponen/import: FormsModule
2. HTML/ Űrlap kialakítása – label for,input(type,name,id,class(form-control) – változó létreohzása) (aSide)
3. TS / component – private változó létrehozása(a 2.pontban beállított változó), kezdőérték adása(aSide)
4. TS/ public getter
5. TS/ public setter – kötelező beállítani a dinamikus érték változáshoz
6. HTML /input type után: [(ngModel)]=”ASide” - az itt megadott változónak a setterét/getterét ,privát változóját be kell állítni uganilyen néven!
7. form alatt, formon kívül interpolációval,új div-ben megjelenítjük az eredményt - {{ASide}}
Kerület kiírása: Html-ben 7.pontot csinálni vagy, számítás elvégzése TS-ben – fv. létrehozása
UTÁNA: fv megjelenításe az interpolációban.

Setter:

public set Author(value: string){
this.author = value;
}

Getter:

public get Author(): string {
return this.author;
}

Tömbök

Első elem a fruits tömbben: {{Fruits[0]}}

Utolsó elem a fruits tömbben(length): {{Fruits[Fruits.length-1]}}

Utolsó elem a fruits tömbben (at): {{Fruits.at(-1)}}

//-1 a végétől indexel

Véletlen elem a tömbben (1. megoldás): {{ Fruits [getRandomNumberBySizeOfFruits() ]}}

Véletlen elem a tömbben (2. megoldás): {{ getRandomFruitElement()}}

Tömb bejárása for ciklussal - ngFor

Akkor használjuk, ha egy kollekció, egy lista elemeit szeretnénk megjeleníteni az oldalon, egymás után.

itt pl a napok listáján végigmegy ls kiírja őket: < div> < ul> < li *ngFor="let nap of napok" >< /li> < /ul> < /div>

A gyümölcsök tömb bejárása for ciklussal - ngFor

< ol>
< li *ngFor="let fruit of Fruits"> //adatszerkezet többesszám, elem egyesszám
{{ fruit }}
< /li>
< /ol>

****TS - fv -véletlen szám

public getRandomNumberBySizeOfFruits():number {
return Math.floor(Math.random() * this.fruits.length);
}

public getRandomFruitElement():string{
return this.fruits[this.getRandomNumberBySizeOfFruits()];
}

*ngIf- Ha a feltétel igaz, akkor az elem megjelenik a DOM-ban, HTML elemet feltételesen megjeleníts vagy elrejts a sablonban

< div *ngIf="!isLoggedIn"> Please login, friend. < /div> logic && operator : < div *ngIf="isLoggedIn && !isNewUser"> Welcome back, friend. < /div> logic OR operator: < div *ngIf="isLoggedIn || isNewUser"> Welcome! < /div>

ngIf - else

Tömbös példák

1. TS /component: privát tömb változók hozzáadása
2. getter-ha csak getter van, akkor readonly
3. setter
4. HTML /
5. ngFor használatához a TS/Component/imports-hoz a Commonmodule-t beimportálni

Interface

adatszerkezet leírására szolgálaz Angularban -egyfajta előírás,ezeket kötelező lesz megadni

1. Interface létrehozása: TS /export class Component alatt, zárójel után:
export interface (itt:) Employee{
name:string;
salary:number;
role:string;
}
2. osztályon belül (felette -azokat az adatokat kapja meg,amit az interfaceben adtunk meg):
private employeeElement: *Employee={
name:”John Doe”, //vessző választja el
salary:”850 000”, //
role:”Junior Angular Developer”
}
*-megadja,hogy az Emplyee interfaceból jön
3. getter
public get EmployeeElement():Employee{
return this.employeeElement ;
}
4. HTML / adat megjelenítés. Container-ben, /p/ Név: {{EmployeeElement.name}} - interpolációval

Pipe-ok - 37.

Szövegformázó elemek

Nagybetűssé alakított szöveg: {{ExampleTxt | uppercase}}

Kisbetűssé alakított szöveg: {{ExampleTxt | lowercase}}

Nagy kezdőbetűssé alakított szöveg (minden különálló szó eleje nagybetű): {{ExampleTxt | titlecase}}

Számok formázása

Eredeti szám: {{RealValue}}

Egész számmá kerekítés (matematika szabályai szerint): {{ RealValue | number:'1.0-0'}}

Vezető nulla beszúrása {{ RealValue | number:'3.0-0'}}

Tizedes érték megadásával {{ RealValue | number:'1.0-2'}}

Százalék formázása

Eredeti százalékos érték: {{PercentValue}}

Egész számra kerekíti, egész szám: {{PercentValue | percent }}

Egész számra kerekíti, egész szám (másként): {{PercentValue | percent:'1.0-0' }}

Százalék megjelenítése tizedes értékekkel (kerekítéssel): {{PercentValue | percent:'1.0-2' }}

Pénzértékek formázása

Eredeti pénzérték: {{ MoneyValue}}

Dollár: {{MoneyValue | currency:'USD'}}

Euró: {{MoneyValue | currency:'EUR'}}

Font: {{MoneyValue | currency:'GBP'}}

Ft: {{MoneyValue | currency:'HUF'}}

Dollár: {{MoneyValue | currency:'USD':'symbol':'1.0-3'}}

Dátum/idő formázása

Eredeti dátum: {{DateValue}}

Rövid teljes dátum: {{DateValue | date:'short'}}

Hosszú teljes dátum: {{DateValue | date:'long'}}

shortDate: {{DateValue | date:'shortDate'}}

fullDate: {{DateValue | date:'fullDate'}}

shortTime: {{DateValue | date:'shortTime'}}

longTime: {{DateValue | date:'longTime'}}

Egyedi minták

Év: {{DateValue | date:'yyyy'}}

Hónap: {{DateValue | date:'MM'}}

Perc: {{DateValue | date:'mm'}}

Nap: {{DateValue | date:'dd'}}

Év-Hónap-Nap #: {{DateValue | date:'yyyy#MM#dd'}}

Év-Hónap-Nap /: {{DateValue | date:'yyyy/MM/dd'}}

Év-Hónap-Nap .: {{DateValue | date:'yyyy.MM.dd'}}

Év-Hónap-Nap - (javasolt elválasztó): {{DateValue | date:'yyyy-MM-dd'}}

Nap szöveggel: {{DateValue | date: 'EEEE'}}

Óra {{DateValue | date: 'hh'}}

Perc {{DateValue | date: 'mm'}}

Mp: {{DateValue | date: 'ss'}}

Képkezelés -39.

export class AngularLogoComponent {
private angularLogoUrl: string = "https://cdn.cdnlogo.com/logos/a/24/angular-icon.svg";
private angularLogoTitle:string = "Angular logo";
private angularLogoAlt:string = "Angular logó felirat nélkül";
private picsHeight:number =100;

public get AngularLogoUrl():string {
return this.angularLogoUrl;
}

public set AngularLogoUrl(value:string){
this.angularLogoUrl = value;
}

public get AngularLogoTitle():string{
return this.angularLogoTitle;
}

public set AngularLogoTitle(value:string){
this.angularLogoTitle = value;
}

public get AngularLogoAlt():string {
return this.angularLogoAlt;
}

public set AngularLogoAlt(value:string){
this.angularLogoAlt = value;
}

public get PicsHeight():number{
return this.picsHeight;
}

public set PicsHeight(value:number){
this.picsHeight = value;
}

//kép kicserélése:
public changePicture():void {
this.AngularLogoUrl = "https://cdn.cdnlogo.com/logos/a/35/angular.svg";
this.angularLogoTitle = "Angular logó felirattal";
this.angularLogoAlt = "Angular logó felirattal";
}

HTML:

< div class="container mt-5">

Angular Logó megjelenítése

Interpolation

< img src="{{ AngularLogoUrl}}" alt="{{AngularLogoAlt}}" title="{{AngularLogoTitle}}" height="{{PicsHeight}}">

Feladat01: Property binding-al jelenítsük meg a képet

< img [src]="AngularLogoUrl" [alt]="AngularLogoAlt" [title]="AngularLogoTitle" [height]="PicsHeight">

Feladat02: Képcsere - event binding segítségével gombra kattintáskor

< button class="btn btn-primary mt-2" (click)="changePicture()">Képcsere< /button>
< /div>

Elemek életciklusai

A komponens életciklusa azoknak a lépéseknek a sorozata, amelyek a komponens létrehozása és megsemmisítése között zajlanak.
Minden lépés az Angular komponensek megjelenítési és frissítési folyamatának egy különböző részét jelenti.

ngOnInit()

Komponens beállítására szolgál. Default beállítások. Mi történjen, ha létrejön a komponens.

ngOnChanges()

A változók módosulásakor hívódik meg. Inicializáláskor az első ngOnChanges a ngOnInit előtt fut.

ngDoCheck

Ezt az életciklus-illesztőt arra használhatod, hogy manuálisan ellenőrizd az állapotváltozásokat az Angular normál változás-észlelése nélkül,
manuálisan frissítve a komponens állapotát. Minden változáskor az ngOnChanges után kerül meghívásra.

ngAfterContentInit()

Ezt az életciklus-illesztőt a tartalmi lekérdezések eredményeinek olvasására használhatod.
Míg hozzáférhetsz ezeknek a lekérdezéseknek az inicializált állapotához, a bármilyen állapot megváltoztatása ebben
a módszerben ExpressionChangedAfterItHasBeenCheckedError hibát eredményez.

ngAfterContentChecked()

hatással lehet az oldal teljesítményére. Kerüld el ennek az illesztőnek a definiálását, amikor csak lehet, és csak akkor használd, ha nincs alternatívád.

ngAfterViewInit

Ezt az életciklus-illesztőt a nézeti lekérdezések eredményeinek olvasására használhatod. Míg hozzáférhetsz ezeknek a lekérdezésekek az inicializált állapotához,
s a bármilyen állapot megváltoztatása ebben a módszerben ExpressionChanged

Angular telepítése-ha még nincs a gépen Angular ▼

Ha már telepítve van az Angular: ▼

4. JS (angular.json / scripts: )

5. BS Telepítés ellenőrzés app/app.component.html –ben:

6. app.component.html - törlése, navbar/menü kialakítás, menüpontok(href=link vagy href=/home)hozzáadása

HTML menü kódja:

Menü 2

Dropdown menü

9. 404 beállítása

Egy kis elmélet: ▼

Databinding - Adatkötés: minta oldal

először TS-ben kell a változtatásokat megcsinálni, utána html

Interpoláció(egyszerű értékadás)

Lépések röviden

Hogy kell kinéznie? TS

Setter:

Getter:

privát változó példa:

Property Binding(tulajdonság kötés)

Lépések röviden

Setter:

Getter:

Event Binding(esemény kötés)

Lépések röviden

Lépések:

1. html kialakítás - gomb elkészítés

2. ( click)="fv.név()"

3. fv megírása: public sendMessage(): void alert('Event binding- fv hívás'); public changeAuthor():void this.author = 'Ersching Bettina'; public get ASide():number return this.aSide;

Two way Data Binding(Kétirányú adatkötés)

Form 2

Példa property binding - interpoláció - HTML:

TS hozzá:

Lépések röviden

Setter:

Getter:

Tömbök

Tömb bejárása for ciklussal - ngFor

****TS - fv -véletlen szám

*ngIf- Ha a feltétel igaz, akkor az elem megjelenik a DOM-ban, HTML elemet feltételesen megjeleníts vagy elrejts a sablonban

ngIf - else

Tömbös példák

Interface

adatszerkezet leírására szolgálaz Angularban -egyfajta előírás,ezeket kötelező lesz megadni

Pipe-ok - 37.

Szövegformázó elemek

Számok formázása

Százalék formázása

Pénzértékek formázása

Dátum/idő formázása

Egyedi minták

Képkezelés -39.

HTML:

Angular Logó megjelenítése

Interpolation

Feladat01: Property binding-al jelenítsük meg a képet

Feladat02: Képcsere - event binding segítségével gombra kattintáskor

Elemek életciklusai

ngOnInit()

ngOnChanges()

ngDoCheck

ngAfterContentInit()

ngAfterContentChecked()

ngAfterViewInit

3. fv megírása: public sendMessage(): void alert('Event binding- fv hívás');
public changeAuthor():void this.author = 'Ersching Bettina';
public get ASide():number return this.aSide;