Szkolenie Angular: ćwiczenie 6

band-details.component.html

<h1 [style.textTransform]="textTransform" [style.color]="color">
  <button (click)="previous()">&lt;</button> Zespół: {{band.name}}
  <button (click)="next()">&gt;</button>
</h1>
<div>
  <label><input type="checkbox" [(ngModel)]="showBio" />Pokaż biografię</label>
  <p *ngIf="showBio">{{band.bio}}</p>
</div>
<div>
  Gatunki muzyczne:
  <ul>
    <li *ngFor="let genre of band.genres">{{genre}}</li>
  </ul>
</div>
<div>
  Członkowie zespołu:
  <ul>
    <li *ngFor="let member of band.members">{{member}}</li>
  </ul>
</div>
<div>
  Linki: 
  <a [href]="band.links.wikipediaUrl">Wikipedia</a><br />
</div>
<div>
  Ustawienia:
  <button (click)="changeTransform()">Wielkie/małe litery</button>
  <select [(ngModel)]="color">
    <option *ngFor="let col of colors" [ngValue]="col">{{col}}</option>
  </select>
</div>
<div>
  <app-band-details-photo [photoUrl]="band.links.photoUrl"></app-band-details-photo>
</div>

band-details.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Band } from "../model";
import { ColorService } from "../color.service";

@Component({
  selector: 'app-band-details',
  templateUrl: './band-details.component.html',
  styles: []
})
export class BandDetailsComponent {

  @Input() band: Band;
  @Output() shift = new EventEmitter<string>();

  textTransform = "uppercase"
  color: string
  colors: string[]

  constructor(colorService: ColorService) {
    this.colors = colorService.getColors();
    this.color = this.colors[0];
  }

  previous() {
    this.shift.emit("previous");
  }

  next() {
    this.shift.emit("next");
  }

  changeTransform() {
    if (this.textTransform === "uppercase") this.textTransform = "lowercase";
    else this.textTransform = "uppercase";
  }

}

color.service.ts

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

@Injectable()
export class ColorService {

  private colors: string[] = [ "blue", "green", "red", "yellow" ];

  constructor() { }

  getColors() {
    return this.colors;
  }

}