feat: import static dynamic challenge

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';

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: `
+    <mat-icon aria-hidden="false" aria-label="user icon" fontIcon="person" />
+    <div>{{ user.name }} {{ user.lastName }}</div>
+  `,
+  host: {
+    class: 'flex',
+  },
+})
+export class UserComponent {
+  @Input({ required: true }) user!: User;
+}

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;
 }

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

@@ -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}`;
-  }
-}

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: `
     <h1 class="mt-4 text-xl">List of Users</h1>
-    @for (user of users; track user) {
-      <div>{{ user | user }}</div>
-    }
+    <table mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef>Name</th>
+        <td mat-cell *matCellDef="let user"><sdi-user [user]="user" /></td>
+      </ng-container>
+
+      <ng-container matColumnDef="country">
+        <th mat-header-cell *matHeaderCellDef>Country</th>
+        <td mat-cell *matCellDef="let user">{{ user.country }}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
   `,
   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;
 }