Szkolenie Angular: ćwiczenie 1

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <h1 [style.textTransform]="textTransform" [style.color]="color">Zespół: {{name}}</h1>
    <p>{{bio}}</p>
    <a [href]="wikipediaUrl">Wikipedia</a><br />
    <button (click)="changeTransform()">Wielkie/małe litery</button>
    <button (click)="changeColor()">Zmień kolor</button>
  `,
  styles: []
})
export class AppComponent {
  name = "Slayer";
  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"

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

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