feat(angular): add Angular Renaissance & update Angular snippets (#245)

* feat(angular): update the existing files + add the new angular (renaissance) practices

* refactor(angular): remove deprecated routing examples

* docs: update readme frameworks progress

* fix(angularRenaissance): fix folder name using right framework id

* fix: add some previous omissions

---------

Co-authored-by: lgarcia <[email protected]>
Co-authored-by: Mathieu Schimmerling <[email protected]>
Co-authored-by: LcsGa <[email protected]>

README.md

@@ -124,7 +124,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" />
+      <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />
   </summary>
   * [x] Reactivity
    * [x] Declare state
@@ -140,12 +140,48 @@ 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
+   * [x] Radio
+   * [x] Select
+* [x] Webapp features
+   * [x] Render app
+   * [x] Fetch data
+
+</details>
+<details>
+  <summary>
+      <img width="18" height="18" src="public/framework/angular-renaissance.svg" />
+      <b>Angular Renaissance</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

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/1-declare-state/angularRenaissance/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/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/2-update-state/angularRenaissance/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/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/1-reactivity/3-computed-state/angularRenaissance/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/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/1-minimal-template/angularRenaissance/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/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/2-styling/angularRenaissance/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/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/3-loop/angularRenaissance/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/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/4-event-click/angularRenaissance/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/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/5-dom-ref/angularRenaissance/inputfocused.component.ts

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

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/2-templating/6-conditional/angularRenaissance/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/3-lifecycle/1-on-mount/angular/pagetitle.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, NgModule, OnInit } from "@angular/core";
 
 @Component({
   selector: "app-pagetitle",
@@ -11,3 +11,9 @@ export class PagetitleComponent implements OnInit {
     this.pageTitle = document.title;
   }
 }
+
+@NgModule({
+  declarations: [PagetitleComponent],
+  exports: [PagetitleComponent],
+})
+export class PagetitleModule {}

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

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