Angular HttpClient

<!DOCTYPE html>
<html>

  <head>
    <title>Your Angular Playground</title>
    <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.18?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.10"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app')
    </script>
    <link rel="stylesheet" href="./default.css" />
  </head>

  <body class="container">
    <my-app>Loading...</my-app>
  </body>

</html>

# Angular Seed

A seed project that enables you to create angular demos quickly.

## Used Versions

- Angular 5
- RxJS 5.5.2
- TypeScript 2.6

## Known Issues

If anyone can help me with this.
You are welcome. :-)

- Can't upgrade typescript-plugin to version 7.1.0
- Can't upgrade SystemJS to version 0.20.19

var versions = {
  angular: '@5.0.0',
  typescript: '@2.6.1',
  tsLib: '@1.8.0',
  pluginTypescript: '@5.3.1',
  rxjs: '@5.5.2'
};

System.config({
  transpiler: 'ts',
  typescriptOptions: {
    experimentalDecorators: true,
    emitDecoratorMetadata: true
  },
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: { defaultExtension: 'js' }
  },
  meta: {
    'typescript': { 'exports': 'ts' }
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {
    'app': './app',
    '@angular/core':                     'npm:@angular/core' + versions.angular + '/bundles/core.umd.js',
    '@angular/common':                   'npm:@angular/common' + versions.angular + '/bundles/common.umd.js',
    '@angular/common/http':              'npm:@angular/common' + versions.angular + '/bundles/common-http.umd.js',
    '@angular/compiler':                 'npm:@angular/compiler' + versions.angular + '/bundles/compiler.umd.js',
    '@angular/forms':                    'npm:@angular/forms' + versions.angular + '/bundles/forms.umd.js',
    '@angular/router':                   'npm:@angular/router' + versions.angular + '/bundles/router.umd.js',
    '@angular/platform-browser':         'npm:@angular/platform-browser' + versions.angular + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + versions.angular + '/bundles/platform-browser-dynamic.umd.js',
    'rxjs':                              'npm:rxjs' + versions.rxjs,
    'ts':                                'npm:plugin-typescript' + versions.pluginTypescript + '/lib/plugin.js',
    'tslib':                             'npm:tslib' + versions.tsLib,
    'typescript':                        'npm:typescript' + versions.typescript + '/lib/typescript.js'
  }
});

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { BookStore } from './book-store.service';

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [BookStore]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { BookStore } from './book-store.service';

import { Book } from './models/book';

@Component({
  selector: 'my-app',
  templateUrl: './app/app.component.html',
  styles: ['h3 { margin-top: 32px; }']
})
export class AppComponent implements OnInit {
  books: any[];
  
  constructor(private bookStore: BookStore) {}
  
  ngOnInit() {
    this.bookStore
      .loadAll()
      .subscribe(books => this.books = books);
  }
}

body {
  font-family: Helvetica;
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

import { Book, BookRaw } from './models/book';

@Injectable()
export class BookStore {
  api = 'https://book-monkey2-api.angular-buch.com';
  
  constructor(private http: HttpClient) {}
  
  loadAll(): Observable<Book[]> {
     return this.http
       .get<BookRaw[]>(`${this.api}/books`)
       .map(raws => this.provideBooksFrom(raws));
  }
  
  provideBooksFrom(raws: BookRaw[]): Book[] {
    return raws.map(raw => new Book(
      raw.title,
      raw.subtitle,
      raw.isbn,
      raw.description,
      raw.authorTeam = raw.authors.join(' & ')
    ));
  }
}

<h1>Bücher</h1>

<div *ngFor="let book of books">
  <h3>{{ book.title }} <small>(Sterne {{ book.rating }})</small></h3>
  <h4>{{ book.subtitle}}</h4>
  <p>{{ book.description }}</p>
  <div class="text-muted">
    <strong>Autoren </strong>
    <p>{{ book.authorTeam }}</p>
  </div>
</div>

export class Book implements BookRaw{
  constructor(
    public title: string,
    public subtitle: string,
    public isbn: string,
    public description: string,
    public authorTeam: string
  ) {}
}

export interface BookRaw {
  title: string;
  subtitle: string;
  isbn: string;
  description: string;
  rating: number;
  authors: string[];
}