initial commit

src/app/product/product.component.css

@@ -0,0 +1,4 @@
+table {
+  width: 75%;
+  margin: 20px auto 0 auto;
+}

src/app/product/product.component.html

@@ -0,0 +1,3 @@
+<section fxFlex=50 class="aligner">
+  <mat-card *ngFor="let product of products">{{product.productName}}</mat-card>
+</section>

src/app/product/product.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { MatTableDataSource, MatSort } from '@angular/material';
+import { DataSource } from '@angular/cdk/table';
+import { ProductService } from '../product/product.service';
+
+@Component({
+  selector: 'app-product',
+  templateUrl: './product.component.html',
+  styleUrls: ['./product.component.css']
+})
+export class ProductComponent implements OnInit {
+
+  products = [];
+  displayedColumns = ['productName', 'brand', 'category', 'price'];
+  // dataSource = new MatTableDataSource(this.productService);
+  // dataSource = this.products;
+
+  constructor(private productService: ProductService) { }
+
+  ngOnInit() {
+    this.getAllProducts();
+  }
+
+  getAllProducts(): void {
+    this.productService.getProducts().subscribe((res: any[]) => {
+      this.products = res;
+      console.log(this.products);
+    });
+  }
+}

src/app/product/product.module.spec.ts

@@ -0,0 +1,13 @@
+import { ProductModule } from './product.module';
+
+describe('ProductModule', () => {
+  let productModule: ProductModule;
+
+  beforeEach(() => {
+    productModule = new ProductModule();
+  });
+
+  it('should create an instance', () => {
+    expect(productModule).toBeTruthy();
+  });
+});

src/app/product/product.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { MatTableModule } from '@angular/material/table';
+import { MatCardModule } from '@angular/material/card';
+
+
+
+import {ProductComponent} from '../product/product.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    MatTableModule,
+    MatCardModule
+  ],
+  declarations: [
+    ProductComponent
+  ]
+})
+export class ProductModule { }

src/app/product/product.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ProductService } from './product.service';
+
+describe('ProductService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ProductService]
+    });
+  });
+
+  it('should be created', inject([ProductService], (service: ProductService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/product/product.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductService {
+
+  url = 'https://fast-ravine-56232.herokuapp.com/api/products';
+
+  constructor(private http: HttpClient) { }
+
+  getProducts(): Observable<any> {
+    return this.http.get(this.url);
+  }
+}