vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53: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/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,

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

@@ -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:
<sdi-user [user]="author" />
<router-outlet />
`,
host: {
@@ -20,7 +21,7 @@ import { RouterOutlet } from '@angular/router';
export class AppComponent {
author: User = {
name: 'Thomas',
lastname: 'Laforge',
lastName: 'Laforge',
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 { provideAnimations } from '@angular/platform-browser/animations';
import { provideRouter } from '@angular/router';
export const appConfig: ApplicationConfig = {
providers: [
provideAnimations(),
provideRouter([
{
path: '',

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

@@ -6,6 +6,9 @@
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
</head>
<body>
<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 { UserPipe } from './lib/user.pipe';
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 {
name: string;
lastname: string;
lastName: 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 { 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;
}