Angular udostępnia sposób przekazywania danych między komponentami: rodzic-dziecko zwany: wiązanie dwukierunkowe (ang.: two-way binding).

Wiązanie jednokierunkowe pozwala na przekazanie danych od rodzica do dziecka. Jeśli u rodzica te dane się zmienią, to zostaną od razu przekazane do dziecka. Z kolei wiązanie dwukierunkowe umożliwia wymianę danych w obu kierunkach: rodzic <--> dziecko. Czyli jeśli zmienimy dane komponecie dziecko, to komponent rodzic także te zmiany odbierze.

Składania

Jednokierunkowe wiązanie:

HTML:

<child [data]="data"></child>

Dwukierunkowe wiązanie:

HTML:

<child [(data)]="data"></child>

Dwukierunkowe wiązanie przykład

Komponent rodzic

parent.component.html:

<div>Counter(parent): <strong>{{ counter }}</strong></div>

<child [(counter)]="counter"></child>

parent.component.ts:

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

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {

  public counter: number = 10;
}

Komponent dziecko

child.component.html:

<div>Counter(child): <strong>{{ counter }}</strong></div>
<button (click)="increment()">Incremenet</button>
<button (click)="decrement()">Decremenet</button>

child.component.ts:

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
})
export class ChildComponent {

  @Input()
  counter: number = 0;

  @Output()
  counterChange: EventEmitter<number> = new EventEmitter<number>();

  public increment() {
    this.counter += 1;
    this.counterChange.emit(this.counter);
  }

  public decrement() {
    this.counter -= 1;
    this.counterChange.emit(this.counter);
  }
}

Wystarczy poklikać w przyciski. Zmian widać zarówno u rodzica, jak i dziecka.

Funkcja typu arrow w JavaScript ma taką postać:

() => {
...
}

Jest to wygodna alternatywa dla tradycyjnej postaci funkcji.

Funkcja typu arrow pozwala także na bezpośrednie zwrócenie wartości bez użycia return:

const sum = () => 1 + 2;
sum(); // 3

Ale jak zwrócić bezpośrednio obiekt z takiej funkcji beż użycia return?

Taki zapis nie zadziała:

const createObject = () => { label: 'test', value: 5 }; // Zwróci błąd

Zwracanie bezpośrednio obiektu

Rozwiązanie tego problemu okazuje się banalne. Wystarczy zwracany obiekt umieścić w nawiasach () jak:

() => ({
  label: 'test',
  value: 5
});

Poniżej podaję jeszcze przykład:

const data = [
	{ title: 'Foo', value: 7 },
	{ title: 'Bar', value: 10 }
].map((current) => 
	(
		{ label: current.title, amount: current.value }
	)
);
console.log(data); // [ { label: 'Foo', amount: 7 }, { label: 'Bar', amount: 10 } ]

Przykład znajdziesz pod tym linkiem.

Poniżej kod:

HTML:

<div class="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
    <div class="box">E</div>
    <div class="box">F</div>
</div>

CSS:

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    height: 200px;
    width: 600px;
    margin: 0 auto;
    border: 1px solid black;
}

.box {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border: 1px solid black;
    background: blue;
    color: white;
    margin-bottom: 0.5em;
}

Sercem tego efektu są reguły CSS dla klasy container. Szczególnie pierwsze pięć linijek. Ważne jest także ustawienie odpowiedniej wysokości.

W jednym z poprzednich wpisów opisałem podstawy PM2. W tym wpisie skupię się na zapisywaniu i wczytywaniu wcześniej zdefiniowanych skryptów.

Obie funkcjonalności przydają się szczególnie, gdy posiadamy większą liczbę skryptów działających w tle. Przez co nie musimy ich na nowo konfigurować.

Zapisywanie skryptów

Zacznijmy od zapisywania ustawień. Po dodaniu do PM2 swoich skryptów wystarczy odpalić poniższą komendę:

pm2 save

Wczytywanie skryptów

Kiedy serwer zostanie zrestartowany skrypty dodane do PM2 znikną:

pm2 list; // lista będzie pusta!

Jeśli zapisaliśmy wcześniej nasze skrypty za pomocą komendy save, to możemy je szybko wczytać na nowo:

pm2 resurrect