miloszpp

declare function bind<T>(component: React.ComponentType<T & InjectedProps>): React.ComponentType<T>;

declare class A<B> extends React.Component<PubProps<B> & InjectedProps> { }
const APrimeComponent = bind(A);
// type inferred to: React.ComponentType<PubProps<unknown>>

declare function AFunc<B>(props: PubProps<B> & InjectedProps): React.ReactElement;
const AFuncPrimeComponent = bind(AFunc);
// type inferred to: React.ComponentType<PubProps<unknown>>

miloszpp

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Post } from '../model';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

import "rxjs/add/observable/combineLatest";
import "rxjs/add/observable/merge";
import "rxjs/add/operator/map";
import "rxjs/add/operator/switchMap";

miloszpp

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Band } from "../model";
import { ColorService } from "../color.service";

@Component({
  selector: 'app-band-details',
  templateUrl: './band-details.component.html',
  styles: []
})
export class BandDetailsComponent implements OnInit {

miloszpp

<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:

miloszpp

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: []
})

miloszpp

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

miloszpp

[
    {
      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"]

miloszpp

[
    {
      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"]
    },

miloszpp

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>

miloszpp

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>