+
+ }
diff --git a/src/app/sections/swap/swap.component.ts b/src/app/sections/swap/swap.component.ts
index cd2f5d3a..a08eb486 100644
--- a/src/app/sections/swap/swap.component.ts
+++ b/src/app/sections/swap/swap.component.ts
@@ -1,4 +1,3 @@
-import { NgForOf } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
@@ -28,14 +27,10 @@ import { MarkdownModule } from 'ngx-markdown';
standalone: true,
imports: [
FormsModule,
- NgForOf,
-
MatButtonModule,
MatCheckboxModule,
MatIconModule,
-
MarkdownModule,
-
GridsterComponent,
GridsterItemComponent
]
diff --git a/src/app/sections/trackBy/trackBy.component.html b/src/app/sections/trackBy/trackBy.component.html
index 7bb89c82..2681d115 100644
--- a/src/app/sections/trackBy/trackBy.component.html
+++ b/src/app/sections/trackBy/trackBy.component.html
@@ -20,15 +20,17 @@
-
-
-
-
+ @for (item of dashboard; track item.id) {
+
+
+
+
+ }
diff --git a/src/app/sections/trackBy/trackBy.component.ts b/src/app/sections/trackBy/trackBy.component.ts
index 5ccfda40..73fb57df 100644
--- a/src/app/sections/trackBy/trackBy.component.ts
+++ b/src/app/sections/trackBy/trackBy.component.ts
@@ -1,4 +1,3 @@
-import { NgForOf } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
@@ -28,16 +27,11 @@ import { TrackByItemComponent } from './trackByItem.component';
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [
- NgForOf,
-
MatButtonModule,
MatIconModule,
-
MarkdownModule,
-
GridsterComponent,
GridsterItemComponent,
-
TrackByItemComponent
]
})
@@ -115,10 +109,6 @@ export class TrackByComponent implements OnInit {
this.dashboard = this.dashboardOriginal.map(x => ({ ...x }));
}
- trackBy(index: number, item: GridsterItem): number {
- return item.id;
- }
-
addItem(): void {
this.dashboard.push({
x: 0,
diff --git a/src/favicon.ico b/src/assets/favicon.ico
similarity index 100%
rename from src/favicon.ico
rename to src/assets/favicon.ico
diff --git a/src/assets/trackBy.md b/src/assets/trackBy.md
index eee239e7..3675ae16 100644
--- a/src/assets/trackBy.md
+++ b/src/assets/trackBy.md
@@ -1 +1 @@
-### Test for trackBy in \*ngFor
+### Test for trackBy item.id in \@for
diff --git a/src/index.html b/src/index.html
index c6ead536..87b8b82e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,4 +1,4 @@
-
+
@@ -9,9 +9,13 @@
rel="stylesheet"
/>
-
+
+
-
+
Loading...
diff --git a/src/styles.scss b/src/styles.scss
index 7899fa31..0f5f16ef 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -10,6 +10,8 @@ body {
body {
display: flex;
flex-direction: column;
+ margin: 0;
+ font-family: Roboto, 'Helvetica Neue', sans-serif;
}
blockquote {
diff --git a/src/theme.scss b/src/theme.scss
index 32ea2506..678a1712 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1,34 +1,27 @@
@use '@angular/material' as mat;
// Plus imports for other components in your app.
-// Include the base styles for Angular Material core. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-@include mat.all-component-typographies();
-@include mat.core();
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue.
-$gridster-app-primary: mat.define-palette(mat.$blue-palette);
-$gridster-app-accent: mat.define-palette(mat.$blue-palette);
-
-// The warn palette is optional (defaults to red).
-$gridster-app-warn: mat.define-palette(mat.$red-palette);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$gridster-app-theme: mat.define-light-theme(
+// Define the theme object.
+$gridster-app-theme: mat.define-theme(
(
color: (
- primary: $gridster-app-primary,
- accent: $gridster-app-accent,
- warn: $gridster-app-warn
+ theme-type: light,
+ primary: mat.$blue-palette
),
- typography: mat.define-typography-config(),
- density: 0
+ density: (
+ scale: 0
+ )
)
);
+// Include the base styles for Angular Material core. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+@include mat.all-component-typographies();
+@include mat.core();
+
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
-@include mat.all-component-themes($gridster-app-theme);
+:root {
+ @include mat.all-component-themes($gridster-app-theme);
+}
diff --git a/tsconfig.json b/tsconfig.json
index 0f5ec006..e2673b4e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,7 @@
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
- "moduleResolution": "node",
+ "moduleResolution": "bundler",
"importHelpers": true,
"skipLibCheck": true,
"strictNullChecks": true,