From 5ae981478c0a35ab629761392311b639f89d4e17 Mon Sep 17 00:00:00 2001 From: thomas Date: Thu, 11 Jan 2024 09:26:41 +0100 Subject: [PATCH] feat: import static dynamic challenge --- apps/nx/static-dynamic-import/project.json | 8 ++++-- .../src/app/app.component.ts | 9 +++--- .../src/app/app.config.ts | 2 ++ apps/nx/static-dynamic-import/src/index.html | 3 ++ libs/static-dynamic-import/users/src/index.ts | 2 +- .../users/src/lib/user.component.ts | 20 +++++++++++++ .../users/src/lib/user.model.ts | 2 +- .../users/src/lib/user.pipe.ts | 12 -------- .../users/src/lib/users.component.ts | 28 ++++++++++++++----- 9 files changed, 59 insertions(+), 27 deletions(-) create mode 100644 libs/static-dynamic-import/users/src/lib/user.component.ts delete mode 100644 libs/static-dynamic-import/users/src/lib/user.pipe.ts 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 }}
- } + + + + + + + + + + + + + +
NameCountry{{ 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; }