feat: add Comments component with deferred loading

angular.json

@@ -16,19 +16,15 @@
             "outputPath": "dist/rero-angular",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               {
                 "glob": "**/*",
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -73,20 +69,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,122 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { User } from './user.component';
+import { Child } from './child.component';
+import { Comments } from './comments.component';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  standalone: true,
+  imports: [User, Child, Comments],
+  template: `
+    <section (mouseover)="onMouseOver()">
+      <app-user name="Simran"></app-user>
+
+      @if (isServerRunning) {
+      <p>Yes, the server is running</p>
+      } @else {
+      <p>No, the server is not running</p>
+      }
+
+      <h2>Users list :</h2>
+      @for (user of users; track user.id) {
+      <p>{{ user.name }}</p>
+      }
+
+      <p>{{ message }}</p>
+    </section>
+
+    <div [contentEditable]="isEditable">This text can be edited</div>
+    <app-child (addItemEvent)="addItem($event)"></app-child>
+
+    <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>
+
+    @defer (on viewport) {
+    <app-comments></app-comments>
+    } @placeholder {
+    <p>Future comments</p>
+    } @loading (minimum 2s) {
+    <p>Loading comments...</p>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        color: #a144eb;
+      }
+    `,
+  ],
 })
 export class AppComponent {
-  title = 'Rero-Angular';
+  city = 'San Francisco';
+  isServerRunning = true;
+
+  users = [
+    { id: 0, name: 'Sarah' },
+    { id: 1, name: 'Amy' },
+    { id: 2, name: 'Rachel' },
+    { id: 3, name: 'Jessica' },
+    { id: 4, name: 'Poornima' },
+  ];
+
+  isEditable = true;
+  message = '';
+
+  onMouseOver() {
+    this.message = 'Way to go 🚀';
+  }
+
+  addItem(event: string) {
+    this.users.push({ id: this.users.length, name: event });
+  }
 }

src/app/app.module.ts

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

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

@@ -0,0 +1,10 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  template: `<p>The user's name is {{ name() }}</p>`,
+  standalone: true,
+})
+export class User {
+  name = input<string>(); //  Input property for the user's name
+}

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 */