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 {AppComponent} from './app.component';
import {HelloWorldComponent} from './hello-world/hello-world.component';
import {AppRoutingModule} from './app-routing.module';
import {AppRouting} from './app.routing';
import {ProductListComponent} from './product-list/product-list.component';
import { LandingpageComponent } from './landingpage/landingpage.component';
@NgModule({
declarations: [
AppComponent,
HelloWorldComponent,
ProductListComponent
ProductListComponent,
LandingpageComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AppRouting,
HttpClientModule
],
providers: [],

View File

@ -1,13 +1,12 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule, Routes} from '@angular/router';
import {HelloWorldComponent} from './hello-world/hello-world.component';
import {AppComponent} from './app.component';
import {ProductListComponent} from './product-list/product-list.component';
import {LandingpageComponent} from './landingpage/landingpage.component';
const routes: Routes = [
{path: '', component: AppComponent},
{path: 'helloworld', component: HelloWorldComponent},
{path: '', component: LandingpageComponent},
{path: 'pdp', component: ProductListComponent}
];
@ -20,5 +19,5 @@ const routes: Routes = [
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 { HelloWorldComponent } from './hello-world.component';
import { LandingpageComponent } from './landingpage.component';
describe('HelloWorldComponent', () => {
let component: HelloWorldComponent;
let fixture: ComponentFixture<HelloWorldComponent>;
describe('LandingpageComponent', () => {
let component: LandingpageComponent;
let fixture: ComponentFixture<LandingpageComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ HelloWorldComponent ]
declarations: [ LandingpageComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(HelloWorldComponent);
fixture = TestBed.createComponent(LandingpageComponent);
component = fixture.componentInstance;
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)">
{{product.name}}
</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 {Product} from '../models/product';
import { Router } from '@angular/router';
import {Router} from '@angular/router';
@Component({
selector: 'app-product-list',
@ -10,6 +10,8 @@ import { Router } from '@angular/router';
})
export class ProductListComponent implements OnInit {
products: Product[];
@Input() numberOfProducts: number;
@Input() showProductPicture: boolean;
constructor(
private apiService: ApiService,
@ -19,6 +21,13 @@ export class ProductListComponent implements OnInit {
ngOnInit(): void {
this.getProducts();
if (!this.numberOfProducts) {
this.numberOfProducts = 10;
}
if (!this.showProductPicture) {
this.showProductPicture = false;
}
}
getProducts(): void {