feat: challenge 42

libs/static-dynamic-import/users/src/index.ts

@@ -0,0 +1,3 @@
+export type { User } from './lib/user.model';
+export { UserPipe } from './lib/user.pipe';
+export { default } from './lib/users.component';

libs/static-dynamic-import/users/src/lib/user.model.ts

@@ -0,0 +1,5 @@
+export interface User {
+  name: string;
+  lastname: string;
+  country: string;
+}

libs/static-dynamic-import/users/src/lib/user.pipe.ts

@@ -0,0 +1,12 @@
+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}`;
+  }
+}

libs/static-dynamic-import/users/src/lib/users.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { randCountry, randFirstName, randLastName } from '@ngneat/falso';
+import type { User } from './user.model';
+import { UserPipe } from './user.pipe';
+
+export const randUser = (): User => ({
+  name: randFirstName(),
+  lastname: randLastName(),
+  country: randCountry(),
+});
+
+@Component({
+  selector: 'sdi-users',
+  standalone: true,
+  imports: [UserPipe],
+  template: `
+    <h1 class="mt-4 text-xl">List of Users</h1>
+    @for (user of users; track user) {
+      <div>{{ user | user }}</div>
+    }
+  `,
+  host: {
+    class: 'flex flex-col',
+  },
+})
+export default class UsersComponent {
+  users = [
+    randUser(),
+    randUser(),
+    randUser(),
+    randUser(),
+    randUser(),
+    randUser(),
+  ];
+}