From: Kai Moritz <kai@juplo.de>
Date: Fri, 20 Dec 2019 15:13:25 +0000 (+0100)
Subject: Product-List aus Tutorial übernommen (direkt mit Erweiterungen)
X-Git-Url: https://juplo.de/gitweb/?p=examples%2Fangular-tutorial;a=commitdiff_plain;h=951fb792a342f38bea1760c5104e9f844ac7d49c

Product-List aus Tutorial übernommen (direkt mit Erweiterungen)
---

diff --git a/src/app/app.component.html b/src/app/app.component.html
index e7d2b67..0a4efe3 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <app-top-bar></app-top-bar>
 
 <div class="container">
-  <h3>Hallo Welt!</h3>
+  <router-outlet></router-outlet>
 </div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d6559fb..4cd6aea 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,15 +4,18 @@ import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
 import { TopBarComponent } from './top-bar/top-bar.component';
+import { ProductListComponent } from './product-list/product-list.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    TopBarComponent
+    TopBarComponent,
+    ProductListComponent
   ],
   imports: [
     BrowserModule,
     RouterModule.forRoot([
+      { path: '', component: ProductListComponent }
     ])
   ],
   providers: [],
diff --git a/src/app/product-list/product-list.component.css b/src/app/product-list/product-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/product-list/product-list.component.html b/src/app/product-list/product-list.component.html
new file mode 100644
index 0000000..91c9aea
--- /dev/null
+++ b/src/app/product-list/product-list.component.html
@@ -0,0 +1,14 @@
+<h2>Products</h2>
+
+<div *ngFor="let product of products, index as productId">
+
+  <h3>
+     <a [title]="product.name + ' details'" [routerLink]="['/products',productId]"> {{ product.name }} </a>
+  </h3>
+  <p *ngIf="product.description"> <em>Description: </em> {{ product.description }} </p>
+  <p> <strong>{{ product.price }} €</strong> </p>
+
+  <button (click)="share()">
+    Share
+  </button>
+</div>
diff --git a/src/app/product-list/product-list.component.spec.ts b/src/app/product-list/product-list.component.spec.ts
new file mode 100644
index 0000000..a2c901b
--- /dev/null
+++ b/src/app/product-list/product-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductListComponent } from './product-list.component';
+
+describe('ProductListComponent', () => {
+  let component: ProductListComponent;
+  let fixture: ComponentFixture<ProductListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/product-list/product-list.component.ts b/src/app/product-list/product-list.component.ts
new file mode 100644
index 0000000..a66ea2e
--- /dev/null
+++ b/src/app/product-list/product-list.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { products } from '../products';
+
+@Component({
+  templateUrl: './product-list.component.html',
+  styleUrls: ['./product-list.component.css']
+})
+export class ProductListComponent {
+  products = products;
+
+  share() {
+    window.alert('The product has been pimmelled!');
+  }
+}
diff --git a/src/app/products.ts b/src/app/products.ts
new file mode 100644
index 0000000..998c38d
--- /dev/null
+++ b/src/app/products.ts
@@ -0,0 +1,17 @@
+export const products = [
+  {
+    name: 'Phone XXL',
+    price: 799,
+    description: 'A large phone with one of the best screens'
+  },
+  {
+    name: 'Phone Minion',
+    price: 699,
+    description: 'A great phone with one of the best cameras'
+  },
+  {
+    name: 'Pimmel-Phone',
+    price: 299,
+    description: ''
+  }
+];