BETTERZON-34: Adding landing page component

- Also removing old stuff
This commit is contained in:
Patrick Müller 2020-12-02 16:43:57 +01:00
parent 23ae0555e5
commit 4100192f02
10 changed files with 44 additions and 34 deletions

View File

@ -3,19 +3,19 @@ import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {AppComponent} from './app.component'; import {AppComponent} from './app.component';
import {HelloWorldComponent} from './hello-world/hello-world.component'; import {AppRouting} from './app.routing';
import {AppRoutingModule} from './app-routing.module';
import {ProductListComponent} from './product-list/product-list.component'; import {ProductListComponent} from './product-list/product-list.component';
import { LandingpageComponent } from './landingpage/landingpage.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
HelloWorldComponent, ProductListComponent,
ProductListComponent LandingpageComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule, AppRouting,
HttpClientModule HttpClientModule
], ],
providers: [], providers: [],

View File

@ -1,13 +1,12 @@
import {NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common'; import {CommonModule} from '@angular/common';
import {RouterModule, Routes} from '@angular/router'; import {RouterModule, Routes} from '@angular/router';
import {HelloWorldComponent} from './hello-world/hello-world.component';
import {AppComponent} from './app.component'; import {AppComponent} from './app.component';
import {ProductListComponent} from './product-list/product-list.component'; import {ProductListComponent} from './product-list/product-list.component';
import {LandingpageComponent} from './landingpage/landingpage.component';
const routes: Routes = [ const routes: Routes = [
{path: '', component: AppComponent}, {path: '', component: LandingpageComponent},
{path: 'helloworld', component: HelloWorldComponent},
{path: 'pdp', component: ProductListComponent} {path: 'pdp', component: ProductListComponent}
]; ];
@ -20,5 +19,5 @@ const routes: Routes = [
RouterModule RouterModule
] ]
}) })
export class AppRoutingModule { export class AppRouting {
} }

View File

@ -1,2 +0,0 @@
<p>hello-world works! Title: </p>
<a href="https://blog.betterzon.xyz">Blog</a>

View File

@ -1,15 +0,0 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

View File

@ -0,0 +1 @@
<app-product-list numberOfProducts="20" showProductPicture="true"></app-product-list>

View File

@ -1,20 +1,20 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HelloWorldComponent } from './hello-world.component'; import { LandingpageComponent } from './landingpage.component';
describe('HelloWorldComponent', () => { describe('LandingpageComponent', () => {
let component: HelloWorldComponent; let component: LandingpageComponent;
let fixture: ComponentFixture<HelloWorldComponent>; let fixture: ComponentFixture<LandingpageComponent>;
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ HelloWorldComponent ] declarations: [ LandingpageComponent ]
}) })
.compileComponents(); .compileComponents();
}); });
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(HelloWorldComponent); fixture = TestBed.createComponent(LandingpageComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });

View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-landingpage',
templateUrl: './landingpage.component.html',
styleUrls: ['./landingpage.component.css']
})
export class LandingpageComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

View File

@ -2,3 +2,6 @@
<p class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)"> <p class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
{{product.name}} {{product.name}}
</p> </p>
<div *ngIf="showProductPicture">
Test
</div>

View File

@ -1,7 +1,7 @@
import {Component, OnInit} from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {ApiService} from '../api.service'; import {ApiService} from '../api.service';
import {Product} from '../models/product'; import {Product} from '../models/product';
import { Router } from '@angular/router'; import {Router} from '@angular/router';
@Component({ @Component({
selector: 'app-product-list', selector: 'app-product-list',
@ -10,6 +10,8 @@ import { Router } from '@angular/router';
}) })
export class ProductListComponent implements OnInit { export class ProductListComponent implements OnInit {
products: Product[]; products: Product[];
@Input() numberOfProducts: number;
@Input() showProductPicture: boolean;
constructor( constructor(
private apiService: ApiService, private apiService: ApiService,
@ -19,6 +21,13 @@ export class ProductListComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.getProducts(); this.getProducts();
if (!this.numberOfProducts) {
this.numberOfProducts = 10;
}
if (!this.showProductPicture) {
this.showProductPicture = false;
}
} }
getProducts(): void { getProducts(): void {