Angular, Typescript
Roman edited this page Jun 22, 2021
·
10 revisions
<h1 class="{{ use_dark_background ? 'darkbg' : ''}}">lorem</h1> // to samo co:
<h1 [class.darkbg]="use_dark_background">lorem</h1>
<h1 [ngClass]="current_css_classes">lorem</h1> //dodaje wszystkie klucze (jako klasy) z obiektu current_css_classes,
// jeśli wartośc dla teego kulcza to true
// [ngStyle] działa analogicznie dla stylu, ale przyjmuje wszystkie wartości np color: "red"
----------------------------------------------------
<div *ngIf="recipe.cover_photo">...</div> // jeśli nie recipe.cover_photo to nie dodaje diva do doma
----------------------------------------------------
@Input()
recipe: Recipe;
@Output
zoomIn: EventEmitter<Recipe> = new EventEmitter();
fireZoomEvent() { // tą fukcję gdzieś wywyołać w htmlu np. (click)=fireZoomEvent()
this.zoomIn.emit(this.recipe)
}
//potem gdzieś w htmlu w elemencie można dać (zoomIn)=nazwaFunkcjiDoWykonania(recipe)
// i napisać tą funkcję już w ts/js
uruchomienie
ng serve
Mamy:
- number
- string
- Bollean
- null, undefinied
- any
- void // do zwracania Można deklarować zmienne jako
let x: string | Boolean
let names: string | string[]
kompilacja:
tsc ts1.ts
node:
sudo apt install nodejs
npm:
sudo npm install --force
typescript:
sudo npm install -g typescript
angular cli
sudo npm install -g @angular/cli
create project:
ng new hello-angularls