From 8c2fbeafe66d5ff76ff91f46b17436cd6c734476 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Thu, 7 Aug 2025 15:33:59 +0200 Subject: [PATCH 01/17] 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 02/17] 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 03/17] 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 04/17] 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 05/17] 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 06/17] 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 07/17] 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 08/17] 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 {} From 67b634a152945c4a5fca2b51f4614f5ec0d43de4 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Tue, 19 Aug 2025 11:03:58 +0200 Subject: [PATCH 09/17] Optimize images with ngOptimizedImage directive --- angular.json | 6 +++++- src/app/app.component.ts | 5 +++-- src/assets/logo.svg | 16 ++++++++++++++++ 3 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 src/assets/logo.svg diff --git a/angular.json b/angular.json index 3540085..130cb74 100644 --- a/angular.json +++ b/angular.json @@ -19,11 +19,15 @@ "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "assets": [ + "src/assets", + "src/favicon.ico", { "glob": "**/*", - "input": "public" + "input": "public", + "output": "/" } ], + "styles": ["src/styles.css"], "scripts": [] }, diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1451c31..0d8b847 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,11 +2,11 @@ import { Component } from '@angular/core'; import { User } from './user.component'; import { Child } from './child.component'; import { Comments } from './comments.component'; - +import { NgOptimizedImage } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, - imports: [User, Child, Comments], + imports: [User, Child, Comments, NgOptimizedImage], template: `
@@ -88,6 +88,7 @@ import { Comments } from './comments.component'; } @loading (minimum 2s) {

Loading comments...

} + Angular logo `, styles: [ ` diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..bf081ac --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + From 8cf490875c65adff7c1ba0692097c16aa33a6e83 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Tue, 19 Aug 2025 11:18:43 +0200 Subject: [PATCH 10/17] setup Angular Router with RouterOutlet in AppComponent --- src/app/app.component.ts | 10 +++++++++- src/app/app.routes.ts | 3 +++ 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 src/app/app.routes.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0d8b847..3a6545f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,11 +3,19 @@ import { User } from './user.component'; import { Child } from './child.component'; import { Comments } from './comments.component'; import { NgOptimizedImage } from '@angular/common'; +import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, - imports: [User, Child, Comments, NgOptimizedImage], + imports: [User, Child, Comments, NgOptimizedImage, RouterOutlet], template: ` + + + +
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts new file mode 100644 index 0000000..dc39edb --- /dev/null +++ b/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = []; From a50c02a4355e594c055be35dbcfdd9ee8746c3f5 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Tue, 19 Aug 2025 15:37:34 +0200 Subject: [PATCH 11/17] Separate page-specific content into home and user --- src/app/app.component.ts | 116 ++------------------------------- src/app/app.module.ts | 4 +- src/app/app.routes.ts | 7 +- src/app/home/home.component.ts | 8 +++ src/app/user.component.ts | 10 --- src/app/user/user.component.ts | 110 +++++++++++++++++++++++++++++++ 6 files changed, 133 insertions(+), 122 deletions(-) create mode 100644 src/app/home/home.component.ts delete mode 100644 src/app/user.component.ts create mode 100644 src/app/user/user.component.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3a6545f..5254166 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,101 +1,19 @@ import { Component } from '@angular/core'; -import { User } from './user.component'; -import { Child } from './child.component'; -import { Comments } from './comments.component'; import { NgOptimizedImage } from '@angular/common'; -import { RouterOutlet } from '@angular/router'; +import { RouterLink, RouterOutlet } from '@angular/router'; + @Component({ selector: 'app-root', standalone: true, - imports: [User, Child, Comments, NgOptimizedImage, RouterOutlet], + imports: [NgOptimizedImage, RouterOutlet, RouterLink], template: ` -
- - - @if (isServerRunning) { -

Yes, the server is running

- } @else { -

No, the server is not running

- } - -

Users list :

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

{{ user.name }}

- } - -

{{ message }}

-
- -
This text can be edited
- - -
-

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

- } Angular logo `, styles: [ @@ -106,26 +24,4 @@ import { RouterOutlet } from '@angular/router'; `, ], }) -export class AppComponent { - 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 }); - } -} +export class AppComponent {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9ab013a..4fc8e18 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,9 +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], + imports: [BrowserModule, AppComponent, RouterModule.forRoot(routes)], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..dcaa353 100644 --- a/src/app/app.routes.ts +++ b/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 }, +]; diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..d554ad2 --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home', + standalone: true, + template: `

Welcome to the home page !

`, +}) +export class Home {} diff --git a/src/app/user.component.ts b/src/app/user.component.ts deleted file mode 100644 index 3d10a19..0000000 --- a/src/app/user.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component, input } from '@angular/core'; - -@Component({ - selector: 'app-user', - template: `

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

`, - standalone: true, -}) -export class User { - name = input(); // Input property for the user's name -} diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts new file mode 100644 index 0000000..5680174 --- /dev/null +++ b/src/app/user/user.component.ts @@ -0,0 +1,110 @@ +import { Component } from '@angular/core'; +import { Child } from '../child.component'; +import { Comments } from '../comments.component'; + +@Component({ + selector: 'app-user', + standalone: true, + imports: [Child, Comments], + template: ` +

Welcome to the user page!

+ + @if (isServerRunning) { +

Yes, the server is running

+ } @else { +

No, the server is not running

+ } + +

Users list :

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

{{ user.name }}

+ } + +

{{ message }}

+ +
This text can be edited
+ + +
+

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

+ } + `, +}) +export class User { + isServerRunning = true; + isEditable = true; + message = ''; + + users = [ + { id: 0, name: 'Sarah' }, + { id: 1, name: 'Amy' }, + { id: 2, name: 'Rachel' }, + { id: 3, name: 'Jessica' }, + { id: 4, name: 'Poornima' }, + ]; + + onMouseOver() { + this.message = 'Way to go 🚀'; + } + + addItem(event: string) { + this.users.push({ id: this.users.length, name: event }); + } +} From c8e1949bfc0e9f796a8b3cbb41bd7a56925718fe Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Tue, 19 Aug 2025 15:42:20 +0200 Subject: [PATCH 12/17] Use Routerlink directive for navigation --- src/app/app.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5254166..957702d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -8,8 +8,8 @@ import { RouterLink, RouterOutlet } from '@angular/router'; imports: [NgOptimizedImage, RouterOutlet, RouterLink], template: ` From 4763bc0fdc42f0dff9fccd5697a433a38565d519 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Tue, 19 Aug 2025 16:30:01 +0200 Subject: [PATCH 13/17] Add FavoriteFramework input with NgModel --- src/app/user/user.component.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts index 5680174..3224763 100644 --- a/src/app/user/user.component.ts +++ b/src/app/user/user.component.ts @@ -1,11 +1,12 @@ 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], + imports: [Child, Comments, FormsModule], template: `

Welcome to the user page!

@@ -77,7 +78,12 @@ import { Comments } from '../comments.component'; my heart and is not at all copied and pasted.

+ +

Your favorite framework is: {{ favoriteFramework }}

@defer (on viewport) { } @placeholder { @@ -91,6 +97,7 @@ export class User { isServerRunning = true; isEditable = true; message = ''; + favoriteFramework = ''; users = [ { id: 0, name: 'Sarah' }, From 01489da2e0acd1f3693e2d789ee8eac454487552 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Thu, 21 Aug 2025 09:06:05 +0200 Subject: [PATCH 14/17] Add functionality to retrieve and display form input value --- src/app/user/user.component.ts | 55 +++++++++++++++++++++++----------- 1 file changed, 38 insertions(+), 17 deletions(-) diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts index 3224763..fd7484b 100644 --- a/src/app/user/user.component.ts +++ b/src/app/user/user.component.ts @@ -10,22 +10,26 @@ import { FormsModule } from '@angular/forms'; template: `

Welcome to the user page!

- @if (isServerRunning) { -

Yes, the server is running

- } @else { -

No, the server is not running

- } + +

+ Yes, the server is running +

+

No, the server is not running

Users list :

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

{{ user.name }}

- } +
+

{{ user.name }}

+

{{ message }}

This text can be edited
+ +

Angular is my favorite framework, and this is why. Angular has the @@ -78,19 +82,23 @@ import { FormsModule } from '@angular/forms'; my heart and is not at all copied and pasted.

+ +

Your favorite framework is: {{ favoriteFramework }}

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

Future comments

- } @loading (minimum 2s) { -

Loading comments...

- } + + + + + + + +

Future comments

+ `, }) export class User { @@ -98,6 +106,7 @@ export class User { isEditable = true; message = ''; favoriteFramework = ''; + commentsVisible = false; users = [ { id: 0, name: 'Sarah' }, @@ -107,11 +116,23 @@ export class User { { id: 4, name: 'Poornima' }, ]; - onMouseOver() { - this.message = 'Way to go 🚀'; + 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 🚀'; + } } From 5839e81fe99ad5044c10c627cfdff48e271f5145 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Thu, 21 Aug 2025 09:12:18 +0200 Subject: [PATCH 15/17] Add reactive form for name and email with submit handling --- src/app/user/user.component.ts | 45 +++++++++++++++++++++++++++------- 1 file changed, 36 insertions(+), 9 deletions(-) diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts index fd7484b..4130778 100644 --- a/src/app/user/user.component.ts +++ b/src/app/user/user.component.ts @@ -1,22 +1,26 @@ import { Component } from '@angular/core'; import { Child } from '../child.component'; import { Comments } from '../comments.component'; -import { FormsModule } from '@angular/forms'; +import { + FormsModule, + ReactiveFormsModule, + FormGroup, + FormControl, +} from '@angular/forms'; @Component({ selector: 'app-user', standalone: true, - imports: [Child, Comments, FormsModule], + imports: [Child, Comments, FormsModule, ReactiveFormsModule], template: `

Welcome to the user page!

-

Yes, the server is running

-

No, the server is not running

 + +

No, the server is not running

+

Users list :

@@ -29,7 +33,6 @@ import { FormsModule } from '@angular/forms'; -

Angular is my favorite framework, and this is why. Angular has the @@ -83,7 +86,6 @@ import { FormsModule } from '@angular/forms';

- - +

Name: {{ profileForm.value.name }}

@@ -135,8 +136,8 @@ export class User { // Formular reactive profileForm = new FormGroup({ - name: new FormControl(''), - email: new FormControl(''), + name: new FormControl('', Validators.required), + email: new FormControl('', [Validators.required, Validators.email]), }); showFramework() { From 053e51615d3bd496c1b227970a04f19e12a7f072 Mon Sep 17 00:00:00 2001 From: Nathan Python Date: Thu, 21 Aug 2025 10:57:00 +0200 Subject: [PATCH 17/17] add CarService and display cars in AppComponent --- src/app/app.component.ts | 9 +++++++-- src/app/car.service.ts | 16 ++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/app/car.service.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 957702d..893b3b0 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,7 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { NgOptimizedImage } from '@angular/common'; import { RouterLink, RouterOutlet } from '@angular/router'; +import { CarService } from './car.service'; @Component({ selector: 'app-root', @@ -14,6 +15,8 @@ import { RouterLink, RouterOutlet } from '@angular/router'; +

{{ carService.getCars() }}

+ Angular logo `, styles: [ @@ -24,4 +27,6 @@ import { RouterLink, RouterOutlet } from '@angular/router'; `, ], }) -export class AppComponent {} +export class AppComponent { + carService = inject(CarService); +} diff --git a/src/app/car.service.ts b/src/app/car.service.ts new file mode 100644 index 0000000..e524907 --- /dev/null +++ b/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]; + } +}