vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 04:43:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: import static dynamic challenge

Browse Source
This commit is contained in:
thomas
2024-01-11 09:26:41 +01:00
parent b851a39251
commit 5ae981478c
9 changed files with 59 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/nx/static-dynamic-import/project.json
View File

@@ -20,7 +20,10 @@
"apps/nx/static-dynamic-import/src/favicon.ico", "apps/nx/static-dynamic-import/src/favicon.ico",
"apps/nx/static-dynamic-import/src/assets" "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": [] "scripts": []
}, },
"configurations": { "configurations": {
@@ -37,7 +40,8 @@
"maximumError": "4kb" "maximumError": "4kb"
} }
], ],
"outputHashing": "all" "outputHashing": "all",
"sourceMap": true
}, },
"development": { "development": {
"optimization": false, "optimization": false,

9
apps/nx/static-dynamic-import/src/app/app.component.ts
View File

@@ -1,5 +1,5 @@
import { import {
UserPipe, UserComponent,
type User, type User,
} from '@angular-challenges/static-dynamic-import/users'; } from '@angular-challenges/static-dynamic-import/users';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@@ -7,10 +7,11 @@ import { RouterOutlet } from '@angular/router';
@Component({ @Component({
standalone: true, standalone: true,
imports: [UserPipe, RouterOutlet], imports: [UserComponent, RouterOutlet],
selector: 'app-root', selector: 'app-root',
template: ` template: `
Author: {{ author | user }} Author:
<sdi-user [user]="author" />
<router-outlet /> <router-outlet />
`, `,
host: { host: {
@@ -20,7 +21,7 @@ import { RouterOutlet } from '@angular/router';
export class AppComponent { export class AppComponent {
author: User = { author: User = {
name: 'Thomas', name: 'Thomas',
lastname: 'Laforge', lastName: 'Laforge',
country: 'France', country: 'France',
}; };
} }

2
apps/nx/static-dynamic-import/src/app/app.config.ts
View File

@@ -1,8 +1,10 @@
import { ApplicationConfig } from '@angular/core'; import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideRouter } from '@angular/router'; import { provideRouter } from '@angular/router';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [ providers: [
provideAnimations(),
provideRouter([ provideRouter([
{ {
path: '', path: '',

3
apps/nx/static-dynamic-import/src/index.html
View File

@@ -6,6 +6,9 @@
<base href="/" /> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>

2
libs/static-dynamic-import/users/src/index.ts
View File

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

20
libs/static-dynamic-import/users/src/lib/user.component.ts Normal file
View File

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

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

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

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

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

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

@@ -1,31 +1,43 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { randCountry, randFirstName, randLastName } from '@ngneat/falso'; import { randCountry, randFirstName, randLastName } from '@ngneat/falso';
import { UserComponent } from './user.component';
import type { User } from './user.model'; import type { User } from './user.model';
import { UserPipe } from './user.pipe';
export const randUser = (): User => ({ export const randUser = (): User => ({
name: randFirstName(), name: randFirstName(),
lastname: randLastName(), lastName: randLastName(),
country: randCountry(), country: randCountry(),
}); });
@Component({ @Component({
selector: 'sdi-users', selector: 'sdi-users',
standalone: true, standalone: true,
imports: [UserPipe], imports: [UserComponent, MatTableModule],
template: ` template: `
<h1 class="mt-4 text-xl">List of Users</h1> <h1 class="mt-4 text-xl">List of Users</h1>
@for (user of users; track user) { <table mat-table [dataSource]="dataSource">
<div>{{ user | user }}</div> <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: { host: {
class: 'flex flex-col', class: 'flex flex-col',
}, },
}) })
export default class UsersComponent { export default class UsersComponent {
users = [ private users = [
randUser(), randUser(),
randUser(), randUser(),
randUser(), randUser(),
@@ -33,4 +45,6 @@ export default class UsersComponent {
randUser(), randUser(),
randUser(), randUser(),
]; ];
displayedColumns: string[] = ['name', 'country'];
dataSource = this.users;
} }