feat : add custom ReversePipe and integrate it in AppComponent

angular.json

@@ -16,19 +16,19 @@
             "outputPath": "dist/rero-angular",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": [
+              "src/assets",
+              "src/favicon.ico",
               {
                 "glob": "**/*",
-                "input": "public"
+                "input": "public",
+                "output": "/"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -73,20 +73,15 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
               {
                 "glob": "**/*",
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         }

src/app/app.component.ts

@@ -1,12 +1,66 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, inject } from '@angular/core';
+import {
+  NgOptimizedImage,
+  LowerCasePipe,
+  DecimalPipe,
+  DatePipe,
+  CurrencyPipe,
+} from '@angular/common';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { CarService } from './car.service';
+import { ReversePipe } from './reverse.pipe';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  standalone: true,
+  imports: [
+    NgOptimizedImage, // For optimized image loading
+    RouterOutlet, // For routing
+    RouterLink, // For router links
+    LowerCasePipe, // For lowercasing text
+    DecimalPipe, // For formatting numbers
+    DatePipe, // For formatting dates
+    CurrencyPipe, // For formatting currency
+    ReversePipe, // Custom reverse pipe
+  ],
+  template: `
+    <nav>
+      <a routerLink="/">Home</a> |
+      <a routerLink="/user">User</a>
+    </nav>
+
+    <router-outlet></router-outlet>
+
+    <p>Car Listing: {{ display }}</p>
+    <p>Username lowercased: {{ username | lowercase }}</p>
+    <p>Reverse Machine: {{ word | reverse }}</p>
+
+    <h2>Pipes formatting demo</h2>
+    <ul>
+      <li>Number with "decimal": {{ num | number : '3.2-2' }}</li>
+      <li>Date with "date": {{ birthday | date : 'medium' }}</li>
+      <li>Currency with "currency": {{ cost | currency }}</li>
+    </ul>
+
+    <img ngSrc="assets/logo.svg" alt="Angular logo" width="32" height="32" />
+  `,
+  styles: [
+    `
+      :host {
+        color: #a144eb;
+      }
+    `,
+  ],
 })
 export class AppComponent {
-  title = 'Rero-Angular';
+  carService = inject(CarService);
+  display = this.carService.getCars().join(' ⭐️ ');
+
+  username = 'NathanPython2002';
+  word = 'AngularRocks';
+
+  // Example data for pipes
+  num = 7.234;
+  birthday = new Date(1995, 6, 15);
+  cost = 1234.56;
 }

src/app/app.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { routes } from './app.routes';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [BrowserModule, AppComponent, RouterModule.forRoot(routes)],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

src/app/app.routes.ts

@@ -1,3 +1,8 @@
 import { Routes } from '@angular/router';
+import { Home } from './home/home.component';
+import { User } from './user/user.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', title: 'App Home Page', component: Home },
+  { path: 'user', title: 'App User Page', component: User },
+];

src/app/car.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root', //  makes this service available application-wide
+})
+export class CarService {
+  cars = ['Sunflower GT', 'Flexus Sport', 'Sprout Mach One'];
+
+  getCars(): string[] {
+    return this.cars;
+  }
+
+  getCar(id: number) {
+    return this.cars[id];
+  }
+}

src/app/child.component.ts

@@ -0,0 +1,15 @@
+import { Component, output } from '@angular/core';
+
+@Component({
+  selector: 'app-child',
+  standalone: true,
+  template: ` <button (click)="addItem()">Add Item</button> `,
+})
+export class Child {
+  // 👉 Output property (type string)
+  addItemEvent = output<string>();
+
+  addItem() {
+    this.addItemEvent.emit('🐢');
+  }
+}

src/app/comments.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-comments',
+  template: ` <p>Here are some comments...</p> `,
+  standalone: true,
+})
+export class Comments {}

src/app/home/home.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  template: `<h1>Welcome to the home page !</h1>`,
+})
+export class Home {}

src/app/reverse.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'reverse',
+  standalone: true,
+})
+export class ReversePipe implements PipeTransform {
+  transform(value: string): string {
+    let reverse = '';
+    for (let i = value.length - 1; i >= 0; i--) {
+      reverse += value[i];
+    }
+    return reverse;
+  }
+}