Szkolenie Angular: ćwiczenie 4

app.component.html

<h1>Wybierz zespół</h1>
<select [(ngModel)]="band">
    <option *ngFor="let band of bands" [ngValue]="band">{{band.name}}</option>
</select>

<div *ngIf="band">
    <h1 [style.textTransform]="textTransform" [style.color]="color">Zespół: {{band.name}}</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>
        <a [href]="band.links.wikipediaUrl">Wikipedia</a><br />
        <button (click)="changeTransform()">Wielkie/małe litery</button>
        <button (click)="changeColor()">Zmień kolor</button><br />
    </div>
    <div>
        <label><input type="checkbox" [(ngModel)]="showPhoto" />Pokaż zdjęcie</label><br />
        <img *ngIf="showPhoto" [src]="band.links.photoUrl" width="300" />
    </div>
</div>

app.component.ts

import { Component } from '@angular/core';
import { Band } from "./model";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: []
})
export class AppComponent {
  bands: Band[] = [
    {
      name: "Metallica",
      bio: "Amerykański zespół heavymetalowy założony w Los Angeles w 1981 roku przez Jamesa Hetfielda i Larsa Ulricha.",
      links: {
        wikipediaUrl: "https://pl.wikipedia.org/wiki/Metallica",
        photoUrl: "https://up-1.cdn-fullscreendirect.com/production/photos/7549/large/20161022_184841_7549_958066.jpeg"
      },
      genres: ["rock", "metal"],
      members: ["James Hetfield", "Lars Urlich", "Kirk Hammett", "Robert Trujillo"]
    },
    {
      name: "Slayer",
      bio: "Amerykańska grupa muzyczna wykonująca thrash metal, powstała w 1981 roku w Huntington Park (przedmieścia Los Angeles).",
      links: {
        wikipediaUrl: "https://pl.wikipedia.org/wiki/Slayer",
        photoUrl: "https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Slayer-Band-Images-HD-PIC-WPD005087.jpg"
      },
      genres: ["thrash metal"],
      members: ["Kerry King", "Tom Arraya", "Paul Bostaph", "Gary Hott"]
    },
    {
      name: "Kombi",
      bio: "Polski zespół muzyczny, założony w 1969 roku przez Sławomira Łosowskiego, występujący początkowo pod nazwą Akcenty, a po jej zmianie w 1976 roku jako Kombi.",
      links: {
        wikipediaUrl: "https://pl.wikipedia.org/wiki/Kombi_(zesp%C3%B3%C5%82_muzyczny)",
        photoUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/%22Kombi%22.JPG/1280px-%22Kombi%22.JPG"
      },
      genres: ["pop", "rock"],
      members: ["Sławomir Łosowski", "Tomasz Łosowski", "Zbigniew Fil", "Karol Kozłowski"]
    },
  ];

  band: Band = this.bands[0];

  textTransform = "uppercase"
  color = "red"

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

  changeColor() {
    if (this.color === "red") this.color = "blue";
    else this.color = "red";
  }
}

model.ts

export interface Band {
  name: string;
  bio: string;
  links: BandLinks;
  genres: string[];
  members: string[];
}

export interface BandLinks {
  wikipediaUrl: string;
  photoUrl: string;
}