Szkolenie Angular: ćwiczenie 5

band-details-photo.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-band-details-photo',
  template: `
<label><input type="checkbox" [(ngModel)]="showPhoto" />Pokaż zdjęcie</label><br />
<img *ngIf="showPhoto" [src]="photoUrl" width="300" />
  `,
  styles: []
})
export class BandDetailsPhotoComponent {
  @Input() photoUrl: string;
}

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>
  <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>
  <app-band-details-photo [photoUrl]="band.links.photoUrl"></app-band-details-photo>
</div>