feat(angular): update the existing files + add the new angular (renai…

…ssance) practices

README.md

@@ -127,7 +127,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/angular.svg" />
             <b>Angular</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -143,12 +143,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox
@@ -550,7 +550,7 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
@@ -604,6 +604,43 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Router link
   - [x] Routing
 
+</details><details>
+        <summary>
+            <img width="18" height="18" src="public/framework/angular-renaissance.svg" />
+            <b>Angular "Renaissance" (v14+)</b>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+
+- [x] Reactivity
+  - [x] Declare state
+  - [x] Update state
+  - [x] Computed state
+- [x] Templating
+  - [x] Minimal template
+  - [x] Styling
+  - [x] Loop
+  - [x] Event click
+  - [x] Dom ref
+  - [x] Conditional
+- [x] Lifecycle
+  - [x] On mount
+  - [x] On unmount
+- [x] Component composition
+  - [x] Props
+  - [x] Emit to parent
+  - [x] Slot
+  - [x] Slot fallback
+  - [x] Context
+- [x] Form input
+  - [x] Input text
+  - [x] Checkbox
+  - [x] Radio
+  - [x] Select
+- [x] Webapp features
+  - [x] Render app
+  - [x] Fetch data
+  - [x] Router link
+  - [x] Routing
+
 </details>
 <!-- progression end -->
 

content/1-reactivity/1-declare-state/angular-renaissance/name.component.ts

@@ -0,0 +1,10 @@
+import { Component, signal } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-name",
+  template: `<h1>Hello {{ name() }}</h1>`,
+})
+export class NameComponent {
+  name = signal("John");
+}

content/1-reactivity/1-declare-state/angular/name.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, NgModule } from "@angular/core";
 
 @Component({
   selector: "app-name",
@@ -7,3 +7,9 @@ import { Component } from "@angular/core";
 export class NameComponent {
   name = "John";
 }
+
+@NgModule({
+  declarations: [NameComponent],
+  exports: [NameComponent],
+})
+export class NameModule {}

content/1-reactivity/2-update-state/angular-renaissance/name.component.ts

@@ -0,0 +1,14 @@
+import { Component, signal } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-name",
+  template: `<h1>Hello {{ name() }}</h1>`,
+})
+export class NameComponent {
+  name = signal("John");
+
+  constructor() {
+    this.name.set("Jane");
+  }
+}

content/1-reactivity/2-update-state/angular/name.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, NgModule } from "@angular/core";
 
 @Component({
   selector: "app-name",
@@ -11,3 +11,9 @@ export class NameComponent {
     this.name = "Jane";
   }
 }
+
+@NgModule({
+  declarations: [NameComponent],
+  exports: [NameComponent],
+})
+export class NameModule {}

content/1-reactivity/3-computed-state/angular-renaissance/doublecount.component.ts

@@ -0,0 +1,12 @@
+import { Component, computed, signal } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-doublecount",
+  template: `<div>{{ doubleCount() }}</div>`,
+})
+export class DoublecountComponent {
+  count = signal(10);
+
+  doubleCount = computed(() => this.count() * 2);
+}

content/1-reactivity/3-computed-state/angular/doublecount.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, NgModule } from "@angular/core";
 
 @Component({
   selector: "app-doublecount",
@@ -11,3 +11,9 @@ export class DoublecountComponent {
     return this.count * 2;
   }
 }
+
+@NgModule({
+  declarations: [DoublecountComponent],
+  exports: [DoublecountComponent],
+})
+export class DoublecountModule {}

content/2-templating/1-minimal-template/angular-renaissance/helloworld.component.ts

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-helloworld",
+  template: `<h1>Hello world</h1>`,
+})
+export class HelloworldComponent {}

content/2-templating/1-minimal-template/angular/helloworld.component.ts

@@ -1,7 +1,13 @@
-import { Component } from "@angular/core";
+import { Component, NgModule } from "@angular/core";
 
 @Component({
   selector: "app-helloworld",
   template: `<h1>Hello world</h1>`,
 })
 export class HelloworldComponent {}
+
+@NgModule({
+  declarations: [HelloworldComponent],
+  exports: [HelloworldComponent],
+})
+export class HelloworldModule {}

content/2-templating/2-styling/angular-renaissance/cssstyle.component.ts

@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-cssstyle",
+  template: `
+    <h1 class="title">I am red</h1>
+    <button style="font-size: 10rem">I am a button</button>
+  `,
+  styles: `
+    .title {
+      color: red;
+    }
+  `,
+})
+export class CssStyleComponent {}

content/2-templating/2-styling/angular/cssstyle.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, NgModule } from "@angular/core";
 
 @Component({
   selector: "app-cssstyle",
@@ -15,3 +15,9 @@ import { Component } from "@angular/core";
   ],
 })
 export class CssStyleComponent {}
+
+@NgModule({
+  declarations: [CssStyleComponent],
+  exports: [CssStyleComponent],
+})
+export class CssStyleModule {}

content/2-templating/3-loop/angular-renaissance/colors.component.ts

@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-colors",
+  template: `
+    <ul>
+      @for (color of colors; track color) {
+        <li>{{ color }}</li>
+      }
+    </ul>
+  `,
+})
+export class ColorsComponent {
+  colors = ["red", "green", "blue"];
+}

content/2-templating/3-loop/angular/colors.component.ts

@@ -1,4 +1,5 @@
-import { Component } from "@angular/core";
+import { Component, NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 @Component({
   selector: "app-colors",
@@ -11,3 +12,10 @@ import { Component } from "@angular/core";
 export class ColorsComponent {
   colors = ["red", "green", "blue"];
 }
+
+@NgModule({
+  declarations: [ColorsComponent],
+  imports: [CommonModule],
+  exports: [ColorsComponent],
+})
+export class ColorsModule {}

content/2-templating/4-event-click/angular-renaissance/counter.component.ts

@@ -0,0 +1,17 @@
+import { Component, signal } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-counter",
+  template: `
+    <p>Counter: {{ count() }}</p>
+    <button (click)="incrementCount()">+1</button>
+  `,
+})
+export class CounterComponent {
+  count = signal(0);
+
+  incrementCount() {
+    this.count.update((count) => count + 1);
+  }
+}

content/2-templating/4-event-click/angular/counter.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, NgModule } from "@angular/core";
 
 @Component({
   selector: "app-counter",
@@ -14,3 +14,9 @@ export class CounterComponent {
     this.count++;
   }
 }
+
+@NgModule({
+  declarations: [CounterComponent],
+  exports: [CounterComponent],
+})
+export class CounterModule {}

content/2-templating/5-dom-ref/angular-renaissance/inputfocused.component.ts

@@ -0,0 +1,14 @@
+import { Component, ElementRef, OnInit, viewChild } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-inputfocused",
+  template: `<input type="text" #inputRef />`,
+})
+export class InputfocusedComponent implements OnInit {
+  inputRef = viewChild.required<ElementRef<HTMLInputElement>>("inputRef");
+
+  ngOnInit() {
+    this.inputRef().nativeElement.focus();
+  }
+}

content/2-templating/5-dom-ref/angular/inputfocused.component.ts

@@ -1,4 +1,10 @@
-import { Component, ViewChild, ElementRef, OnInit } from "@angular/core";
+import {
+  Component,
+  ViewChild,
+  ElementRef,
+  OnInit,
+  NgModule,
+} from "@angular/core";
 
 @Component({
   selector: "app-inputfocused",
@@ -12,3 +18,9 @@ export class InputfocusedComponent implements OnInit {
     this.inputRef.nativeElement.focus();
   }
 }
+
+@NgModule({
+  declarations: [InputfocusedComponent],
+  exports: [InputfocusedComponent],
+})
+export class InputfocusedModule {}

content/2-templating/6-conditional/angular-renaissance/trafficlight.component.ts

@@ -0,0 +1,35 @@
+import { Component, computed, signal } from "@angular/core";
+
+const TRAFFIC_LIGHTS = ["red", "orange", "green"];
+
+@Component({
+  standalone: true,
+  selector: "app-trafficlight",
+  template: `
+    <button (click)="nextLight()">Next light</button>
+    <p>Light is: {{ light() }}</p>
+    <p>
+      You must
+      @switch (light()) {
+        @case ("red") {
+          <span>STOP</span>
+        }
+        @case ("orange") {
+          <span>SLOW DOWN</span>
+        }
+        @case ("green") {
+          <span>GO</span>
+        }
+      }
+    </p>
+  `,
+})
+export class TrafficlightComponent {
+  lightIndex = signal(0);
+
+  light = computed(() => TRAFFIC_LIGHTS[this.lightIndex()]);
+
+  nextLight() {
+    this.lightIndex.update((index) => (index + 1) % TRAFFIC_LIGHTS.length);
+  }
+}

content/2-templating/6-conditional/angular/trafficlight.component.ts

@@ -1,4 +1,5 @@
-import { Component } from "@angular/core";
+import { Component, NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 const TRAFFIC_LIGHTS = ["red", "orange", "green"];
 
@@ -28,3 +29,10 @@ export class TrafficlightComponent {
     this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 }
+
+@NgModule({
+  declarations: [TrafficlightComponent],
+  imports: [CommonModule],
+  exports: [TrafficlightComponent],
+})
+export class TrafficlightModule {}

content/3-lifecycle/1-on-mount/angular-renaissance/pagetitle.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-pagetitle",
+  template: `<p>Page title: {{ pageTitle }}</p>`,
+})
+export class PagetitleComponent implements OnInit {
+  pageTitle = "";
+
+  ngOnInit() {
+    this.pageTitle = document.title;
+  }
+}