angular4 example

by KevinGabbert

HTML

<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="results" ></div>
<bt-books></bt-books>

TypeScript

let { Component, NgModule } = ng.core;
let { DatePipe } = ng.common;

@Component({
  selector: 'bt-books',
  //todo: this should go in a separate file with templateUrl
template: `
  <div class='card'>
  <div class='card-header'>
    {{pageTitle}}
  </div>
  <div class='card-body'>
    <div class='table-responsive'>
      <table class='table'
             *ngIf='hardcodedBooks && hardcodedBooks.length'>
        <thead>
          <tr>
            <th>Book</th>
            <th>Code</th>
            <th>Release Date</th>
            <th>Price</th>
            <th>5 Star Rating</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor='let book of hardcodedBooks'>
            <td>{{ book.Name }}</td>
            <td>{{ book.isbn }}</td>
            <td>{{ book.releaseDate }}</td>
            <td>{{ book.price }}</td>
            <td>{{ book.starRating }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
  `,
})
class BookListComponent {
  pageTitle: string = this.getTitle();
  title(): string {
    //todo: this title should come from somewhere
    //on spreadsheet
    return "Book List (h)"
  }
  hardcodedBooks: any[] = [
    {
      "bookId": 2,
      "Name": "Arctic Sun",
      "isbn": "978-3-16-148410-0",
      "releaseDate": "March 18, 2019",
      "price": 32.99,
      "starRating": 4.2,
    },
    {
      "bookId": 5,
      "Name": "Beta Test",
      "isbn": "222-3-16-123456-0",
      "releaseDate": "May 21, 2019",
      "price": 8.9,
      "starRating": 4.8,
    }
  ];
  //booksWithPromise = this.getBooksWithPromise();
  
  getTitle(): string {
  
  	return "Book List Title";
  }

} 
}

class Book {
	 id: string;
   Name: string;
   isbn: string;
   releaseDate: string;
   price: string;
   starRating: string;
   constructor() { 
   }
} 


//https://docs.google.com/spreadsheets/d/1uOyKlAhppYBboW3wrXK4UgEHxcporEgwCgqSpwKM8hk/edit?usp=sharing

//todo.. use fontawesome for stars

const { LOCALE_ID, NgModule } =...