diff --git a/apps/nx/static-dynamic-import/project.json b/apps/nx/static-dynamic-import/project.json
index 2359641..c0208b0 100644
--- a/apps/nx/static-dynamic-import/project.json
+++ b/apps/nx/static-dynamic-import/project.json
@@ -20,7 +20,10 @@
"apps/nx/static-dynamic-import/src/favicon.ico",
"apps/nx/static-dynamic-import/src/assets"
],
- "styles": ["apps/nx/static-dynamic-import/src/styles.scss"],
+ "styles": [
+ "apps/nx/static-dynamic-import/src/styles.scss",
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+ ],
"scripts": []
},
"configurations": {
@@ -37,7 +40,8 @@
"maximumError": "4kb"
}
],
- "outputHashing": "all"
+ "outputHashing": "all",
+ "sourceMap": true
},
"development": {
"optimization": false,
diff --git a/apps/nx/static-dynamic-import/src/app/app.component.ts b/apps/nx/static-dynamic-import/src/app/app.component.ts
index b4b1db0..9c5bd67 100644
--- a/apps/nx/static-dynamic-import/src/app/app.component.ts
+++ b/apps/nx/static-dynamic-import/src/app/app.component.ts
@@ -1,5 +1,5 @@
import {
- UserPipe,
+ UserComponent,
type User,
} from '@angular-challenges/static-dynamic-import/users';
import { Component } from '@angular/core';
@@ -7,10 +7,11 @@ import { RouterOutlet } from '@angular/router';
@Component({
standalone: true,
- imports: [UserPipe, RouterOutlet],
+ imports: [UserComponent, RouterOutlet],
selector: 'app-root',
template: `
- Author: {{ author | user }}
+ Author:
+
`,
host: {
@@ -20,7 +21,7 @@ import { RouterOutlet } from '@angular/router';
export class AppComponent {
author: User = {
name: 'Thomas',
- lastname: 'Laforge',
+ lastName: 'Laforge',
country: 'France',
};
}
diff --git a/apps/nx/static-dynamic-import/src/app/app.config.ts b/apps/nx/static-dynamic-import/src/app/app.config.ts
index e058094..6525263 100644
--- a/apps/nx/static-dynamic-import/src/app/app.config.ts
+++ b/apps/nx/static-dynamic-import/src/app/app.config.ts
@@ -1,8 +1,10 @@
import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
import { provideRouter } from '@angular/router';
export const appConfig: ApplicationConfig = {
providers: [
+ provideAnimations(),
provideRouter([
{
path: '',
diff --git a/apps/nx/static-dynamic-import/src/index.html b/apps/nx/static-dynamic-import/src/index.html
index 4a76511..77adec4 100644
--- a/apps/nx/static-dynamic-import/src/index.html
+++ b/apps/nx/static-dynamic-import/src/index.html
@@ -6,6 +6,9 @@
+
diff --git a/libs/static-dynamic-import/users/src/index.ts b/libs/static-dynamic-import/users/src/index.ts
index 786abee..6826ecd 100644
--- a/libs/static-dynamic-import/users/src/index.ts
+++ b/libs/static-dynamic-import/users/src/index.ts
@@ -1,3 +1,3 @@
+export { UserComponent } from './lib/user.component';
export type { User } from './lib/user.model';
-export { UserPipe } from './lib/user.pipe';
export { default } from './lib/users.component';
diff --git a/libs/static-dynamic-import/users/src/lib/user.component.ts b/libs/static-dynamic-import/users/src/lib/user.component.ts
new file mode 100644
index 0000000..4ca4e65
--- /dev/null
+++ b/libs/static-dynamic-import/users/src/lib/user.component.ts
@@ -0,0 +1,20 @@
+import { Input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { User } from './user.model';
+
+import { Component } from '@angular/core';
+@Component({
+ selector: 'sdi-user',
+ standalone: true,
+ imports: [MatIconModule],
+ template: `
+
+ {{ user.name }} {{ user.lastName }}
+ `,
+ host: {
+ class: 'flex',
+ },
+})
+export class UserComponent {
+ @Input({ required: true }) user!: User;
+}
diff --git a/libs/static-dynamic-import/users/src/lib/user.model.ts b/libs/static-dynamic-import/users/src/lib/user.model.ts
index 4da2247..4a1be02 100644
--- a/libs/static-dynamic-import/users/src/lib/user.model.ts
+++ b/libs/static-dynamic-import/users/src/lib/user.model.ts
@@ -1,5 +1,5 @@
export interface User {
name: string;
- lastname: string;
+ lastName: string;
country: string;
}
diff --git a/libs/static-dynamic-import/users/src/lib/user.pipe.ts b/libs/static-dynamic-import/users/src/lib/user.pipe.ts
deleted file mode 100644
index ff28f77..0000000
--- a/libs/static-dynamic-import/users/src/lib/user.pipe.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { User } from './user.model';
-
-@Pipe({
- name: 'user',
- standalone: true,
-})
-export class UserPipe implements PipeTransform {
- transform(user: User): string {
- return `${user.name} ${user.lastname} - ${user.country}`;
- }
-}
diff --git a/libs/static-dynamic-import/users/src/lib/users.component.ts b/libs/static-dynamic-import/users/src/lib/users.component.ts
index 1967096..598a48f 100644
--- a/libs/static-dynamic-import/users/src/lib/users.component.ts
+++ b/libs/static-dynamic-import/users/src/lib/users.component.ts
@@ -1,31 +1,43 @@
import { Component } from '@angular/core';
+import { MatTableModule } from '@angular/material/table';
import { randCountry, randFirstName, randLastName } from '@ngneat/falso';
+import { UserComponent } from './user.component';
import type { User } from './user.model';
-import { UserPipe } from './user.pipe';
export const randUser = (): User => ({
name: randFirstName(),
- lastname: randLastName(),
+ lastName: randLastName(),
country: randCountry(),
});
@Component({
selector: 'sdi-users',
standalone: true,
- imports: [UserPipe],
+ imports: [UserComponent, MatTableModule],
template: `
List of Users
- @for (user of users; track user) {
- {{ user | user }}
- }
+
+
+ | Name |
+ |
+
+
+
+ Country |
+ {{ user.country }} |
+
+
+ |
+ |
+
`,
host: {
class: 'flex flex-col',
},
})
export default class UsersComponent {
- users = [
+ private users = [
randUser(),
randUser(),
randUser(),
@@ -33,4 +45,6 @@ export default class UsersComponent {
randUser(),
randUser(),
];
+ displayedColumns: string[] = ['name', 'country'];
+ dataSource = this.users;
}