Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="script.ts"></script>
    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="system.config.js"></script>
    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="tsconfig.json"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
  </body>

</html>

// Code goes here

/* Styles go here */

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Series';
}

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

//Router Module for Application level Route
import { RouterModule,Routes } from '@angular/router';


import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { BookViewComponent } from './book-view/book-view.component';

//import statement for service
import { BookService } from './book.service';
import { BookHttpService } from './book-http.service';

//decorators
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BookViewComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: 'book/:isbn', component: BookViewComponent }
    ])
  ],
  providers: [BookService,BookHttpService],
  bootstrap: [AppComponent]
})

export class AppModule { }

<!--Home page Html-->
<div class="container">
  <div class="row">
    <div class="col-md-12 upperCol">Books</div>
  </div>
  <div class="row">
    <div *ngFor="let book of allBooks" class="col-xl-12 col-md-6 col-lg-3 col-xl-3">

      <!--Iterative starts here-->
      <div class="row booksRow">
        <div class="col-md-12 bookCol">
          <div class="panel panel-default">
            <div class="panel-heading">{{book.name}}</div>
            <div class="panel-body">
              <p>
                Isbn: {{ book.isbn}}
              </p>
            </div>
            <div class="panel-footer">
              <a [routerLink]="['/book',book.isbn]" class="btn btn-primary">View</a>
            </div>
          </div>
        </div>
      </div>
      <!--iterative div ends here-->

      <div class="row charactersRow"></div>
      <div class="row housesRow"></div>
    </div>
  </div>
</div>

import { Component, OnInit, OnDestroy } from '@angular/core';
import { BookService } from '../book.service';
import { BookHttpService } from '../book-http.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})


export class HomeComponent implements OnInit, OnDestroy{

  public allBooks;

  constructor(private bookHttpService:BookHttpService) { 
    console.log("HomeComponent constructor  called")
  }

  ngOnInit() {
    console.log("HomeComponent OnInit called");
    
    this.allBooks = this.bookHttpService.getAllBooks().subscribe(
      
      data =>{
        console.log(data);
        this.allBooks = data["data"];
      },
      error =>{
        console.log("some error occured");
        console.log(error.errorMessage);
      }
    )
    console.log(this.allBooks);
  }

  ngOnDestroy() {
    console.log("HomeComponent OnDestroy called")
  }


}

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

@Injectable()


export class BookService {


  public currentBook;

  constructor() {

    console.log("Service Constructor is called");
  }

}

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

//importing Http Client to make the request
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

//importing observables related code
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { tap } from 'rxjs/operators';

@Injectable()

export class BookHttpService {

  public allBooks;
  public currentBook;
  public baseUrl = 'https://anapioficeandfire.com/api';


  constructor(private _http: HttpClient) {
    console.log("Book Http service was called");
  }

  // method to return all Books

  public getAllBooks(): any {

    let myResponse = this._http.get(this.baseUrl+'/books');
    console.log(myResponse);
    return myResponse;

  }

  // method to return single Book Informations
  public getSingleBookInfo(currentBookIsbnCode): any {



  } // end get book info function

}