diff --git a/angular.json b/angular.json index 74be285..f50b600 100644 --- a/angular.json +++ b/angular.json @@ -25,6 +25,10 @@ "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ + { + "glob": "**/*", + "input": "public" + }, { "glob": "**/*", "input": "node_modules/@swisscom/sdx/dist/js/webcomponents/webcomponents/assets", diff --git a/public/burger.webp b/public/burger.webp new file mode 100644 index 0000000..ec85d5f Binary files /dev/null and b/public/burger.webp differ diff --git a/public/burgerveggie.png b/public/burgerveggie.png new file mode 100644 index 0000000..115e389 Binary files /dev/null and b/public/burgerveggie.png differ diff --git a/src/app/app.html b/src/app/app.html index 7528372..12b5d24 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,342 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title() }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'Prompt and best practices for AI', link: 'https://angular.dev/ai/develop-with-ai'}, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + \ No newline at end of file diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..13ae707 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,4 @@ import { Routes } from '@angular/router'; +import { Productspage } from './productspage/productspage'; -export const routes: Routes = []; +export const routes: Routes = [{ path: '', component: Productspage }]; diff --git a/src/app/app.ts b/src/app/app.ts index d75d60f..8639663 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,12 +1,14 @@ import { Component, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { Productspage } from './productspage/productspage'; @Component({ selector: 'app-root', + standalone: true, imports: [RouterOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], templateUrl: './app.html', - styleUrl: './app.scss', + styleUrls: ['./app.scss'], }) export class App { protected readonly title = signal('core'); diff --git a/src/app/products.service.ts b/src/app/products.service.ts new file mode 100644 index 0000000..6a5aa78 --- /dev/null +++ b/src/app/products.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class Products { + getProductList() { + return [ + { id: 1, name: 'Rindburger', price: 14.95, img: '/burger.webp' }, + { id: 2, name: 'Pouletburger', price: 16.95, img: '/burger.webp' }, + { id: 3, name: 'Veggieburger', price: 20.95, img: '/burgerveggie.png' }, + ]; + } +} diff --git a/src/app/productspage/productspage.html b/src/app/productspage/productspage.html index cd2bdb3..a2840c7 100644 --- a/src/app/productspage/productspage.html +++ b/src/app/productspage/productspage.html @@ -1 +1,9 @@ -

productspage works!

+
+ + @for (item of productList; track $index) { + +

{{item.price}}

+ + + } +
\ No newline at end of file diff --git a/src/app/productspage/productspage.scss b/src/app/productspage/productspage.scss index e69de29..47db7c6 100644 --- a/src/app/productspage/productspage.scss +++ b/src/app/productspage/productspage.scss @@ -0,0 +1,13 @@ +.products { + display: flex; + flex-wrap: wrap; + gap: 16px; + flex-direction: row; + justify-content: center; + padding-top: 20px; + + sdx-card { + height: auto; + width: 75%; + } +} diff --git a/src/app/productspage/productspage.ts b/src/app/productspage/productspage.ts index 6b5fcf5..fc43c51 100644 --- a/src/app/productspage/productspage.ts +++ b/src/app/productspage/productspage.ts @@ -1,11 +1,16 @@ -import { Component } from '@angular/core'; +import { Component, inject, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { Products } from '../products.service'; @Component({ selector: 'app-productspage', + standalone: true, + schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [], templateUrl: './productspage.html', - styleUrl: './productspage.scss', + styleUrls: ['./productspage.scss'], }) export class Productspage { + productService = inject(Products); + productList = this.productService.getProductList(); } diff --git a/src/index.html b/src/index.html index 144df87..fcde19e 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,16 @@ + - Core + Burgerladen - + + - + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index a88970d..1e24211 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,6 +2,6 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { App } from './app/app'; import { defineCustomElements } from '@swisscom/sdx/dist/js/webcomponents/loader'; -defineCustomElements(window); +defineCustomElements(); bootstrapApplication(App, appConfig).catch((err) => console.error(err));