Szkolenie Angular: ćwiczenie 3

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <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>
    <a [href]="band.links.wikipediaUrl">Wikipedia</a><br />
    <button (click)="changeTransform()">Wielkie/małe litery</button>
    <button (click)="changeColor()">Zmień kolor</button><br />
    <input [(ngModel)]="band.name" />
    <div>
      <label><input type="checkbox" [(ngModel)]="showPhoto" />Pokaż zdjęcie</label>
      <img *ngIf="showPhoto" [src]="band.links.photoUrl" />
    </div>
  `,
  styles: []
})
export class AppComponent {
  band: 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"
    }
  };

  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;
}

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