- adding bootstrap, font-awesome to make feature product-list: html, component

Author: Adarsh Maurya

APM-Start/package-lock.json

@@ -20,7 +20,9 @@
  "@angular/platform-browser": "^7.0.4",
  "@angular/platform-browser-dynamic": "^7.0.4",
  "@angular/router": "^7.0.4",
+ "bootstrap": "^4.1.3",
  "core-js": "^2.6.0",
+ "font-awesome": "^4.7.0",
  "rxjs": "~6.3.3",
  "zone.js": "~0.8.26"
  },

APM-Start/package.json

@@ -4,7 +4,7 @@ import { Component } from "@angular/core";
  selector: 'pm-root',
  template: `
  <div><h1>{{pageTitle}}</h1>
- <div>My First Component</div>
+ <pm-products></pm-products>
  </div>
  `
 

APM-Start/src/app/app.component.ts

@@ -2,10 +2,12 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { ProductListComponent } from './products/product-list.component';
 
 @NgModule({
  declarations: [
- AppComponent
+ AppComponent,
+ ProductListComponent
  ],
  imports: [
  BrowserModule

APM-Start/src/app/app.module.ts

@@ -0,0 +1,41 @@
+<div cllass='card'>
+ <div class='card-header'>
+ Product List
+ </div>
+
+ <div class='card-body'>
+ <div class='now'>
+ <div class='col-md-2'>Filter by:</div>
+ <div class='col-md-4'>
+ <input type='text' />
+ </div>
+ </div>
+ <div class='row'>
+ <div class='col-md-6'>
+ <h4>Filtered by:</h4>
+ </div>
+ </div>
+ </div>
+<div class='table-responsive'>
+ <table class='table'>
+ <thead>
+ <tr>
+ <th>
+ <button>
+ Show Image
+ </button>
+ </th>
+ <th>Product</th>
+ <th>Code</th>
+ <th>Available</th>
+ <th>Price</th>
+ <th>5 Star Rating</th>
+ </tr>
+ </thead>
+ <tbody>
+ 
+ </tbody>
+ </table>
+</div>
+
+</div>

APM-Start/src/app/products/product-list.component.html

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+ selector: 'pm-products',
+ templateUrl: './product-list.component.html'
+})
+export class ProductListComponent{
+}

APM-Start/src/app/products/product-list.component.ts

@@ -1,3 +1,5 @@
+@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+@import "../node_modules/font-awesome/css/font-awesome.min.css";
 /* You can add global styles to this file, and also import other style files */
 div.card-header {
  font-size: large;