"feat: add ability to get and display form input value"

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,27 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { NgOptimizedImage } from '@angular/common';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  standalone: true,
+  imports: [NgOptimizedImage, RouterOutlet, RouterLink],
+  template: `
+    <nav>
+      <a routerLink="/">Home</a> |
+      <a routerLink="/user">User</a>
+    </nav>
+
+    <router-outlet></router-outlet>
+
+    <img ngSrc="assets/logo.svg" alt="Angular logo" width="32" height="32" />
+  `,
+  styles: [
+    `
+      :host {
+        color: #a144eb;
+      }
+    `,
+  ],
 })
-export class AppComponent {
-  title = 'Rero-Angular';
-}
+export class AppComponent {}

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/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/user/user.component.ts

@@ -0,0 +1,138 @@
+import { Component } from '@angular/core';
+import { Child } from '../child.component';
+import { Comments } from '../comments.component';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-user',
+  standalone: true,
+  imports: [Child, Comments, FormsModule],
+  template: `
+    <h1>Welcome to the user page!</h1>
+
+    <!-- Vérification si le serveur tourne -->
+    <p *ngIf="isServerRunning; else serverStopped">
+      Yes, the server is running
+    </p>
+    <ng-template #serverStopped
+      ><p>No, the server is not running</p></ng-template
+    >
+
+    <h2>Users list :</h2>
+    <div *ngFor="let user of users; trackBy: trackById">
+      <p>{{ user.name }}</p>
+    </div>
+
+    <p>{{ message }}</p>
+
+    <div [contentEditable]="isEditable">This text can be edited</div>
+
+    <app-child (addItemEvent)="addItem($event)"></app-child>
+
+    <!-- Article complet répété -->
+    <article>
+      <p>
+        Angular is my favorite framework, and this is why. Angular has the
+        coolest deferrable view feature that makes defer loading content the
+        easiest and most ergonomic it could possibly be. The Angular community
+        is also filled with amazing contributors and experts that create
+        excellent content. The community is welcoming and friendly, and it
+        really is the best community out there.
+      </p>
+      <p>
+        I can't express enough how much I enjoy working with Angular. It offers
+        the best developer experience I've ever had. I love that the Angular
+        team puts their developers first and takes care to make us very happy.
+        They genuinely want Angular to be the best framework it can be, and
+        they're doing such an amazing job at it, too. This statement comes from
+        my heart and is not at all copied and pasted. In fact, I think I'll say
+        these exact same things again a few times.
+      </p>
+      <p>
+        Angular is my favorite framework, and this is why. Angular has the
+        coolest deferrable view feature that makes defer loading content the
+        easiest and most ergonomic it could possibly be. The Angular community
+        is also filled with amazing contributors and experts that create
+        excellent content. The community is welcoming and friendly, and it
+        really is the best community out there.
+      </p>
+      <p>
+        I can't express enough how much I enjoy working with Angular. It offers
+        the best developer experience I've ever had. I love that the Angular
+        team puts their developers first and takes care to make us very happy.
+        They genuinely want Angular to be the best framework it can be, and
+        they're doing such an amazing job at it, too. This statement comes from
+        my heart and is not at all copied and pasted. In fact, I think I'll say
+        these exact same things again a few times.
+      </p>
+      <p>
+        Angular is my favorite framework, and this is why. Angular has the
+        coolest deferrable view feature that makes defer loading content the
+        easiest and most ergonomic it could possibly be. The Angular community
+        is also filled with amazing contributors and experts that create
+        excellent content. The community is welcoming and friendly, and it
+        really is the best community out there.
+      </p>
+      <p>
+        I can't express enough how much I enjoy working with Angular. It offers
+        the best developer experience I've ever had. I love that the Angular
+        team puts their developers first and takes care to make us very happy.
+        They genuinely want Angular to be the best framework it can be, and
+        they're doing such an amazing job at it, too. This statement comes from
+        my heart and is not at all copied and pasted.
+      </p>
+    </article>
+
+    <!-- Formulaire pour récupérer le framework préféré -->
+    <label for="framework">
+      Favorite Framework:
+      <input id="framework" type="text" [(ngModel)]="favoriteFramework" />
+    </label>
+
+    <p>Your favorite framework is: {{ favoriteFramework }}</p>
+    <button (click)="showFramework()">Show Framework</button>
+
+    <!-- Chargement différé du composant Comments -->
+    <ng-container *ngIf="commentsVisible; else placeholder">
+      <app-comments></app-comments>
+    </ng-container>
+    <ng-template #placeholder>
+      <p>Future comments</p>
+    </ng-template>
+  `,
+})
+export class User {
+  isServerRunning = true;
+  isEditable = true;
+  message = '';
+  favoriteFramework = '';
+  commentsVisible = false;
+
+  users = [
+    { id: 0, name: 'Sarah' },
+    { id: 1, name: 'Amy' },
+    { id: 2, name: 'Rachel' },
+    { id: 3, name: 'Jessica' },
+    { id: 4, name: 'Poornima' },
+  ];
+
+  showFramework() {
+    alert(this.favoriteFramework);
+  }
+
+  addItem(event: string) {
+    this.users.push({ id: this.users.length, name: event });
+  }
+
+  trackById(index: number, user: any) {
+    return user.id;
+  }
+
+  loadComments() {
+    this.commentsVisible = true;
+  }
+
+  onMouseOver() {
+    this.message = 'Way to go 🚀';
+  }
+}

src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false,
+};

src/index.html

@@ -1,13 +1,11 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>ReroAngular</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <title>Rero Angular</title>
+    <base href="/" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

src/main.ts

@@ -1,6 +1,13 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-bootstrapApplication(AppComponent, appConfig)
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
   .catch((err) => console.error(err));

src/styles.css

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */