Rozpoczęcie projektu

ng new nazwaProjektu  //stworzy również katalog o nazwie projektu

Główny config aplikacji

Znajduje się w pliku angular-cli.json. Warto tutaj usunąć prefix, żeby nowe moduły nie miały dodawanego, niepotrzebnego prefixu
Dołączanie styli/skryptów również odbywa się w tym pliku

Pobieranie funkcji z componentu

w pliku .ts componentu

functionName() {
    //whatever
}

następnie w component.html

{{ functionName() }}

Można jeszcze pozbyć się nawiasów z htmla przy nazwie funkcji, jeżeli w .ts componentu przed nazwą funkcji wpiszemy get

Przypisywanie wartości atrybutom

<input type="text" [value]="playlist.name" class="form-control">

Dodawanie/odejmowanie pojedynczej klasy przy spełnionym warunku

<div (click)="selected = null" [class.table-active]="selected == null"></div>

ten fragment będzie dodawał/usuwał klasę table-active

Definiowanie parametru nieobowiązkowego

interface Dog {
    zmienna?: string;
}

Generowanie komponentu

ng generate component nazwa-componentu

Pętle

<div *ngFor="let dog of dogs; let i = index">
  {{dog}}
</div>

Warunki, contenery, templaty

<ng-container *ngFor="let day of days; let e = even">
  ...
</ng-container>


<div *ngIf="dogs.length > 0; else noDogs">
    <div *ngFor="let dog of dogs">
       ...
    </div>
</div>

<ng-template #noDogs>
    treść alternatywa, jeżeli warunek nie jest spełniony
</ng-template>

Rozbudowany if

<div *ngIf="dogs.length > 0; then areDogs else noDogs"></div>

<ng-template #areDogs>
</ng-template>

<ng-template #noDogs></ng-template>

Różne funkcje podstawowe

ngOnChanges
uruchamia się przed ngOnInit. Odpala się tylko, kiedy zmienia się referencja

ngDoCheck
wywołuje się przy każdej zmianie, nawet jeżeli referencja się nie zmieniła.