MATERIAŁY NA WARSZTAT #3 2020-11-26

Dzisiaj poznamy sposoby na przesyłanie danych pomiędzy komponentami.

Tworzenie aplikacji

ng new pizza-z-pieca

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]

cd pizza-z-pieca
code .

Komponent piec do pizzy

cd src/app

ng g c piec

Plik: app.component.html

<app-piec></app-piec>
<app-piec></app-piec>

Plik: piec.component.ts

numerPieca = 1;
nazwaPieca = 'Główny';

Plik: piec.component.html

<p>Piec {{ nazwaPieca }} numer {{ numerPieca }} działa!</p>

Plik: app.component.ts

pieceWPizzeri = ['Pierwszy', 'Drugi'];

Plik: app.component.html

<app-piec *ngFor="let piec of pieceWPizzeri"></app-piec>

Plik: piec.component.ts

  @Input()
  numerPieca = 1;

  @Input()
  nazwaPieca = 'Główny';

Plik: app.component.html

<app-piec *ngFor="let piec of pieceWPizzeri" [nazwaPieca]="piec"></app-piec>

<app-piec *ngFor="let piec of pieceWPizzeri; let i = index"
          [nazwaPieca]="piec"
          [numerPieca]="i">
</app-piec>

<app-piec *ngFor="let piec of pieceWPizzeri; let i = index"
          [nazwaPieca]="piec"
          [numerPieca]="i+1">
</app-piec>

Plik: piec.component.ts

  @Input()
  numerPieca: number;

  @Input()
  nazwaPieca: string;

Komponent zamówienia

ng g c zamowienia

Plik: piec.component.html

<h2>Piec {{ nazwaPieca }} numer {{ numerPieca }} działa!</h2>

<app-zamowienia></app-zamowienia>

Dodawanie nowego zamówienia

Plik: zamowienia.component.html

<button (click)="onNoweZamowienie()">Nowe zamówienie</button>

<p>{{ zamowienie }}</p>

Plik: zamowienia.component.ts

  zamowienie: string;

  constructor() { }

  ngOnInit(): void {
  }

  onNoweZamowienie() {
    this.zamowienie = "Capriciosa";
  }

Plik: zamowienia.component.html

<input type="text" (input)="onWpisywanieZamowienia($event)">

<button (click)="onNoweZamowienie()">Nowe zamówienie</button>

<p>{{ zamowienie }}</p>

Plik: zamowienia.component.ts

  onWpisywanieZamowienia(event: Event) {
    this.zamowienie = (<HTMLInputElement>event.target).value;
  }

Formularz zamówienia

Plik: app.module.ts

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
  ],

Plik: zamowienia.component.html

<input type="text" [(ngModel)]="zamowienie">

<button (click)="onNoweZamowienie()">Nowe zamówienie</button>

<p>{{ zamowienie }}</p>

Plik: zamowienia.component.ts

  onNoweZamowienie() {

  }

  // onWpisywanieZamowienia(event: Event) {
  //   this.zamowienie = (<HTMLInputElement>event.target).value;
  // }

Wiele zamówień w jednym piecu

ng g c zamowienie

Plik: zamowienia.component.html

<input type="text" [(ngModel)]="zamowienie">

<button (click)="onNoweZamowienie()">Nowe zamówienie</button>

<app-zamowienie *ngFor="let zamowienie of zamowienia"></app-zamowienie>

Plik: zamowienia.component.ts

  zamowienie = '';
  zamowienia = [];

  constructor() { }

  ngOnInit(): void {
  }

  onNoweZamowienie() {
    this.zamowienia.push(this.zamowienie);
    this.zamowienie = '';
  }

Plik: zamowienie.component.ts

  @Input()
  zamowienie: string;

  @Input()
  id: number;

Plik: zamowienie.component.html

<p>Piecze się {{ zamowienie }} nr {{ id + 1 }}</p>

Plik: zamowienia.component.html

<app-zamowienie *ngFor="let zamowienie of zamowienia; let i = index"
                [zamowienie]="zamowienie"
                [id]="i"></app-zamowienie>

Pizza upieczona!

zamowienie.component.ts

  upieczona = false;

  constructor() {
    setTimeout(() => {
      this.upieczona = true;
    }, 10000)
  }

zamowienie.component.html

<p>Piecze się {{ zamowienie }} nr {{ id + 1 }}</p>
<p>{{ upieczona }}</p>

zamowienie.component.scss

.dodobioru {
  background-color: green;
}

zamowienie.component.html

<p [ngClass]="{dodobioru: upieczona === true}">Piecze się {{ zamowienie }} nr {{ id + 1 }}</p>

Pizza z pieca!

zamowienie.component.html

<p [ngClass]="{dodobioru: upieczona === true}">
  Piecze się {{ zamowienie }} nr {{ id + 1 }}
  <button (click)="wyjacZPieca()">Wyjąć z pieca</button>
</p>

zamowienie.component.ts

  @Output() wyjmujePizzeEvent = new EventEmitter<number>();

  wyjacZPieca() {
    this.wyjmujePizzeEvent.emit(this.id);
  }

zamowienia.component.html

<app-zamowienie *ngFor="let zamowienie of zamowienia; let i = index"
                [zamowienie]="zamowienie"
                [id]="i"
                (wyjmujePizzeEvent)="wyjmijZpieca($event)"></app-zamowienie>

zamowienia.component.ts

  wyjmijZpieca(pizzaNr: number) {
    this.zamowienia.splice(pizzaNr, 1);
  }

Dlaczego można wyjąć nie upieczoną pizzę?

zamowienie.component.html

<button (click)="wyjacZPieca()" [disabled]="!upieczona">Wyjąć z pieca</button>

Nagranie ze spotkania