Szkolenie Angular: ćwiczenie 2

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <h1 [style.textTransform]="textTransform" [style.color]="color">Zespół: {{name}}</h1>
    <div>
      <label><input type="checkbox" [(ngModel)]="showBio" />Pokaż biografię</label>
      <p *ngIf="showBio">{{bio}}</p>
    </div>
    <a [href]="wikipediaUrl">Wikipedia</a><br />
    <button (click)="changeTransform()">Wielkie/małe litery</button>
    <button (click)="changeColor()">Zmień kolor</button><br />
    <input [value]="name" (input)="name = $event.target.value" /><br />
    <input [(ngModel)]="name" />
    <div>
      <label><input type="checkbox" [(ngModel)]="showPhoto" />Pokaż zdjęcie</label>
      <img *ngIf="showPhoto" [src]="photoUrl" />
    </div>
  `,
  styles: []
})
export class AppComponent {
  name = "Metallica";
  bio = "Amerykański zespół heavymetalowy założony w Los Angeles w 1981 roku przez Jamesa Hetfielda i Larsa Ulricha."
  wikipediaUrl = "https://pl.wikipedia.org/wiki/Metallica"
  textTransform = "uppercase"
  color = "red"
  photoUrl = "https://up-1.cdn-fullscreendirect.com/production/photos/7549/large/20161022_184841_7549_958066.jpeg"

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

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