From 8c2fbeafe66d5ff76ff91f46b17436cd6c734476 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Thu, 7 Aug 2025 15:33:59 +0200 Subject: [PATCH 1/8] Add User component and conditional rendering in AppComponent --- angular.json | 17 +- src/app/app.component.css | 0 src/app/app.component.html | 336 -------------------------------- src/app/app.component.spec.ts | 29 --- src/app/app.component.ts | 17 +- src/app/app.config.ts | 8 - src/app/app.module.ts | 9 + src/app/app.routes.ts | 3 - src/app/user.component.ts | 7 + src/environments/environment.ts | 3 + src/index.html | 22 +-- src/main.ts | 15 +- src/styles.css | 1 - 13 files changed, 56 insertions(+), 411 deletions(-) delete mode 100644 src/app/app.component.css delete mode 100644 src/app/app.component.html delete mode 100644 src/app/app.component.spec.ts delete mode 100644 src/app/app.config.ts create mode 100644 src/app/app.module.ts delete mode 100644 src/app/app.routes.ts create mode 100644 src/app/user.component.ts create mode 100644 src/environments/environment.ts diff --git a/angular.json b/angular.json index 7cff7cc..3540085 100644 --- a/angular.json +++ b/angular.json @@ -16,9 +16,7 @@ "outputPath": "dist/rero-angular", "index": "src/index.html", "browser": "src/main.ts", - "polyfills": [ - "zone.js" - ], + "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "assets": [ { @@ -26,9 +24,7 @@ "input": "public" } ], - "styles": [ - "src/styles.css" - ], + "styles": ["src/styles.css"], "scripts": [] }, "configurations": { @@ -73,10 +69,7 @@ "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": [ { @@ -84,9 +77,7 @@ "input": "public" } ], - "styles": [ - "src/styles.css" - ], + "styles": ["src/styles.css"], "scripts": [] } } diff --git a/src/app/app.component.css b/src/app/app.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/app.component.html b/src/app/app.component.html deleted file mode 100644 index 36093e1..0000000 --- a/src/app/app.component.html +++ /dev/null @@ -1,336 +0,0 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index 4d92fc2..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have the 'Rero-Angular' title`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('Rero-Angular'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, Rero-Angular'); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index eba57a2..88c4d24 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,19 @@ import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import { User } from './user.component'; @Component({ selector: 'app-root', - imports: [RouterOutlet], - templateUrl: './app.component.html', - styleUrl: './app.component.css' + template: `
`, + imports: [User], + standalone: true, + styles: [ + ` + :host { + color: #a144eb; + } + `, + ], }) export class AppComponent { - title = 'Rero-Angular'; + city = 'San Francisco'; } diff --git a/src/app/app.config.ts b/src/app/app.config.ts deleted file mode 100644 index a1e7d6f..0000000 --- a/src/app/app.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; -import { provideRouter } from '@angular/router'; - -import { routes } from './app.routes'; - -export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] -}; diff --git a/src/app/app.module.ts b/src/app/app.module.ts new file mode 100644 index 0000000..9ab013a --- /dev/null +++ b/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 {} diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts deleted file mode 100644 index dc39edb..0000000 --- a/src/app/app.routes.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Routes } from '@angular/router'; - -export const routes: Routes = []; diff --git a/src/app/user.component.ts b/src/app/user.component.ts new file mode 100644 index 0000000..e838c35 --- /dev/null +++ b/src/app/user.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-user', + template: `Username: youngTech`, +}) +export class User {} diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 0000000..a20cfe5 --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,3 @@ +export const environment = { + production: false, +}; diff --git a/src/index.html b/src/index.html index 35b216f..38ed327 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,11 @@ - - - - - ReroAngular - - - - - - - + + + + + Rero Angular + + + + + diff --git a/src/main.ts b/src/main.ts index 35b00f3..d9a2e7e 100644 --- a/src/main.ts +++ b/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)); diff --git a/src/styles.css b/src/styles.css index 90d4ee0..e69de29 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ From 9a7a86dc159a98e214172b5e38ffa9eb9985929d Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Mon, 18 Aug 2025 11:54:19 +0200 Subject: [PATCH 2/8] Add server status conditional display --- src/app/app.component.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 88c4d24..3a6355f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,7 +3,17 @@ import { User } from './user.component'; @Component({ selector: 'app-root', - template: `
`, + template: ` +
+ + + @if (isServerRunning) { +

Yes, the server is running

+ } @else { +

No, the server is not running

+ } +
+ `, imports: [User], standalone: true, styles: [ @@ -16,4 +26,5 @@ import { User } from './user.component'; }) export class AppComponent { city = 'San Francisco'; + isServerRunning = true; // Boolean flag to indicate server status } From 481d16c986ae4cae5d6094e74db86fc9c9887a6b Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Mon, 18 Aug 2025 14:50:34 +0200 Subject: [PATCH 3/8] feat: add user list --- src/app/app.component.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3a6355f..87a822c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -12,6 +12,11 @@ import { User } from './user.component'; } @else {

No, the server is not running

} + +

Liste des utilisateurs :

+ @for (user of users; track user.id) { +

{{ user.name }}

+ } `, imports: [User], @@ -27,4 +32,12 @@ import { User } from './user.component'; export class AppComponent { city = 'San Francisco'; isServerRunning = true; // Boolean flag to indicate server status + + users = [ + { id: 0, name: 'Sarah' }, + { id: 1, name: 'Amy' }, + { id: 2, name: 'Rachel' }, + { id: 3, name: 'Jessica' }, + { id: 4, name: 'Poornima' }, + ]; } From 21a5049341a1fcc9c85908931d5ac44535465bb3 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Mon, 18 Aug 2025 15:07:09 +0200 Subject: [PATCH 4/8] add isEditable property with contentEditable binding --- src/app/app.component.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 87a822c..b9dc6f5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -18,6 +18,8 @@ import { User } from './user.component';

{{ user.name }}

} + +
This text can be edited
`, imports: [User], standalone: true, @@ -40,4 +42,6 @@ export class AppComponent { { id: 3, name: 'Jessica' }, { id: 4, name: 'Poornima' }, ]; + + isEditable = true; // Boolean flag to indicate if the component is editable } From ecb42e7dd344d61eca0d79d45465640aa98761ad Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Mon, 18 Aug 2025 15:35:19 +0200 Subject: [PATCH 5/8] add mouseover event handler to section --- src/app/app.component.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b9dc6f5..e06d2ed 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,7 +4,7 @@ import { User } from './user.component'; @Component({ selector: 'app-root', template: ` -
+
@if (isServerRunning) { @@ -13,10 +13,12 @@ import { User } from './user.component';

No, the server is not running

} -

Liste des utilisateurs :

+

Users list :

@for (user of users; track user.id) {

{{ user.name }}

} + +

{{ message }}

This text can be edited
@@ -44,4 +46,9 @@ export class AppComponent { ]; isEditable = true; // Boolean flag to indicate if the component is editable + message = ''; // Message to display on mouseover + + onMouseOver() { + this.message = 'Way to go 🚀'; + } } From e20cb585c477eddcfbe70ce998adc95893173e81 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Mon, 18 Aug 2025 16:57:39 +0200 Subject: [PATCH 6/8] add input property 'name' to User component --- src/app/app.component.ts | 2 +- src/app/user.component.ts | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e06d2ed..1336a2f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,7 +5,7 @@ import { User } from './user.component'; selector: 'app-root', template: `
- + @if (isServerRunning) {

Yes, the server is running

diff --git a/src/app/user.component.ts b/src/app/user.component.ts index e838c35..3d10a19 100644 --- a/src/app/user.component.ts +++ b/src/app/user.component.ts @@ -1,7 +1,10 @@ -import { Component } from '@angular/core'; +import { Component, input } from '@angular/core'; @Component({ selector: 'app-user', - template: `Username: youngTech`, + template: `

The user's name is {{ name() }}

`, + standalone: true, }) -export class User {} +export class User { + name = input(); // Input property for the user's name +} From 8c7c6bcd0f86a54d5a1eb59034f1f9133bdec056 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Tue, 19 Aug 2025 08:24:07 +0200 Subject: [PATCH 7/8] add child output event and handle item addition --- src/app/app.component.ts | 11 +++++++++-- src/app/child.component.ts | 15 +++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 src/app/child.component.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1336a2f..9efd49b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { User } from './user.component'; +import { Child } from './child.component'; @Component({ selector: 'app-root', @@ -22,8 +23,10 @@ import { User } from './user.component';
This text can be edited
+ `, - imports: [User], + + imports: [User, Child], standalone: true, styles: [ ` @@ -49,6 +52,10 @@ export class AppComponent { message = ''; // Message to display on mouseover onMouseOver() { - this.message = 'Way to go 🚀'; + this.message = 'Way to go'; + } + + addItem(newItem: string) { + this.users.push({ id: this.users.length, name: newItem }); // Add the new item to the users list } } diff --git a/src/app/child.component.ts b/src/app/child.component.ts new file mode 100644 index 0000000..301eebf --- /dev/null +++ b/src/app/child.component.ts @@ -0,0 +1,15 @@ +import { Component, output } from '@angular/core'; + +@Component({ + selector: 'app-child', + standalone: true, + template: ` `, +}) +export class Child { + // 👉 Output property (type string) + addItemEvent = output(); + + addItem() { + this.addItemEvent.emit('🐢'); + } +} From 6578b4013f82ce844d1c31b8754ddd3850d70244 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Tue, 19 Aug 2025 08:47:41 +0200 Subject: [PATCH 8/8] Add Comments component with defer loading --- src/app/app.component.ts | 79 +++++++++++++++++++++++++++++++---- src/app/comments.component.ts | 8 ++++ 2 files changed, 78 insertions(+), 9 deletions(-) create mode 100644 src/app/comments.component.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9efd49b..1451c31 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,9 +1,12 @@ import { Component } from '@angular/core'; import { User } from './user.component'; import { Child } from './child.component'; +import { Comments } from './comments.component'; @Component({ selector: 'app-root', + standalone: true, + imports: [User, Child, Comments], template: `
@@ -24,10 +27,68 @@ import { Child } from './child.component';
This text can be edited
- `, - imports: [User, Child], - standalone: true, +
+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+
+ + @defer (on viewport) { + + } @placeholder { +

Future comments

+ } @loading (minimum 2s) { +

Loading comments...

+ } + `, styles: [ ` :host { @@ -38,7 +99,7 @@ import { Child } from './child.component'; }) export class AppComponent { city = 'San Francisco'; - isServerRunning = true; // Boolean flag to indicate server status + isServerRunning = true; users = [ { id: 0, name: 'Sarah' }, @@ -48,14 +109,14 @@ export class AppComponent { { id: 4, name: 'Poornima' }, ]; - isEditable = true; // Boolean flag to indicate if the component is editable - message = ''; // Message to display on mouseover + isEditable = true; + message = ''; onMouseOver() { - this.message = 'Way to go'; + this.message = 'Way to go 🚀'; } - addItem(newItem: string) { - this.users.push({ id: this.users.length, name: newItem }); // Add the new item to the users list + addItem(event: string) { + this.users.push({ id: this.users.length, name: event }); } } diff --git a/src/app/comments.component.ts b/src/app/comments.component.ts new file mode 100644 index 0000000..8856cd1 --- /dev/null +++ b/src/app/comments.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-comments', + template: `

Here are some comments...

`, + standalone: true, +}) +export class Comments {}