feat(project): delete dependancy to primeng

apps/angular/di/.eslintrc.json

@@ -4,24 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "app",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
-        ]
-      },
+      "rules": {},
       "extends": [
         "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"

apps/angular/di/project.json

@@ -19,12 +19,7 @@
           "apps/angular/di/src/favicon.ico",
           "apps/angular/di/src/assets"
         ],
-        "styles": [
-          "apps/angular/di/src/styles.scss",
-          "node_modules/primeicons/primeicons.css",
-          "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
-          "node_modules/primeng/resources/primeng.min.css"
-        ],
+        "styles": ["apps/angular/di/src/styles.scss"],
         "scripts": []
       },
       "configurations": {

apps/angular/di/src/app/app.component.ts

@@ -1,7 +1,6 @@
-/* eslint-disable @angular-eslint/directive-selector */
+import { TableComponent } from '@angular-challenges/angular/di';
 import { AsyncPipe, NgFor } from '@angular/common';
 import { Component, Directive } from '@angular/core';
-import { TableModule } from 'primeng/table';
 import { CurrencyPipe } from './currency.pipe';
 import { CurrencyService } from './currency.service';
 import { Product, products } from './product.model';
@@ -11,7 +10,7 @@ interface ProductContext {
 }
 
 @Directive({
-  selector: 'ng-template[pTemplate="body"]',
+  selector: 'ng-template[product]',
   standalone: true,
 })
 export class ProductDirective {
@@ -25,19 +24,19 @@ export class ProductDirective {
 
 @Component({
   standalone: true,
-  imports: [TableModule, CurrencyPipe, AsyncPipe, NgFor, ProductDirective],
+  imports: [TableComponent, CurrencyPipe, AsyncPipe, NgFor, ProductDirective],
   providers: [CurrencyService],
   selector: 'app-root',
   template: `
-    <p-table [value]="products">
-      <ng-template pTemplate="header">
+    <table [items]="products">
+      <ng-template #header>
         <tr>
           <th *ngFor="let col of displayedColumns">
             {{ col }}
           </th>
         </tr>
       </ng-template>
-      <ng-template pTemplate="body" let-product>
+      <ng-template #body product let-product>
         <tr>
           <td>{{ product.name }}</td>
           <td>{{ product.priceA | currency | async }}</td>
@@ -45,7 +44,7 @@ export class ProductDirective {
           <td>{{ product.priceC | currency | async }}</td>
         </tr>
       </ng-template>
-    </p-table>
+    </table>
   `,
 })
 export class AppComponent {

apps/angular/di/src/styles.scss

@@ -1 +1,21 @@
-/* You can add global styles to this file, and also import other style files */
+table {
+  width: 100%;
+}
+
+table thead > tr > th {
+  text-align: left;
+  padding: 1rem 1rem;
+  border: 1px solid #dee2e6;
+  border-width: 0 0 1px 0;
+  font-weight: 700;
+  color: #343a40;
+  background: #f8f9fa;
+  transition: box-shadow 0.2s;
+}
+
+table tbody > tr > td {
+  text-align: left;
+  border: 1px solid #dee2e6;
+  border-width: 0 0 1px 0;
+  padding: 1rem 1rem;
+}