New component

Author: alexiconia

APM-Start/package-lock.json

@@ -18,6 +18,8 @@
     "@angular/platform-browser": "~12.0.0",
     "@angular/platform-browser-dynamic": "~12.0.0",
     "@angular/router": "~12.0.0",
+    "bootstrap": "^5.1.3",
+    "font-awesome": "^4.7.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "zone.js": "~0.11.4"

APM-Start/package.json

@@ -1,4 +1,4 @@
 <div style="text-align: center">
-  <h1>Welcome to {{ title }}!!</h1>
-  ... Starter Files ...
+  <h1>{{ title }}</h1>
+  <pm-products></pm-products>
 </div>

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

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  title = 'Angular: Getting Started';
+  title = 'Acme Product Management';
 }

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

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

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

@@ -0,0 +1,33 @@
+<div class="card">
+  <div class="card-header">Product List</div>
+  <div class="body">
+    <div class="row">
+      <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 class="btn btn-primary">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,7 @@
+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,4 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~bootstrap/dist/css/bootstrap.min.css";
+@import "~font-awesome/css/font-awesome.min.css";
+
 div.card-header {
   font-size: large;
 }