feat: added Angular 17 (Signals)

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

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

content/1-reactivity/2-update-state/angular17/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/angular17/doublecount.component.ts

@@ -0,0 +1,11 @@
+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/angular17/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/angular17/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/angular17/colors.component.ts

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

content/2-templating/4-event-click/angular17/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/angular17/inputfocused.component.ts

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

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

@@ -0,0 +1,34 @@
+import { Component, signal, computed } 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/angular17/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;
+  }
+}

content/3-lifecycle/2-on-unmount/angular17/time.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnDestroy } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-time",
+  template: `<p>Current time: {{ time }}</p>`,
+})
+export class TimeComponent implements OnDestroy {
+  time: string = new Date().toLocaleTimeString();
+  timer: number;
+
+  constructor() {
+    this.timer = setInterval(() => {
+      this.time = new Date().toLocaleTimeString();
+    }, 1000);
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.timer);
+  }
+}

content/4-component-composition/1-props/angular17/app.component.ts

@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-root",
+  template: `
+    <app-userprofile
+      name="John"
+      [age]="20"
+      [favouriteColors]="['green', 'blue', 'red']"
+      [isAvailable]="true"
+    >
+    </app-userprofile>
+  `,
+})
+export class AppComponent {}

content/4-component-composition/1-props/angular17/userprofile.component.ts

@@ -0,0 +1,18 @@
+import { Component, input } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-userprofile",
+  template: `
+    <p>My name is {{ name() }}!</p>
+    <p>My age is {{ age() }}!</p>
+    <p>My favourite colors are {{ favouriteColors().join(", ") }}!</p>
+    <p>I am {{ isAvailable() ? "available" : "not available" }}</p>
+  `,
+})
+export class UserprofileComponent {
+  name = input("");
+  age = input(0);
+  favouriteColors = input<string[]>([]);
+  isAvailable = input(false);
+}

content/4-component-composition/2-emit-to-parent/angular17/answer-button.component.ts

@@ -0,0 +1,14 @@
+import { Component, output } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-answer-button",
+  template: `
+    <button (click)="yes.emit()">YES</button>
+    <button (click)="no.emit()">NO</button>
+  `,
+})
+export class AnswerButtonComponent {
+  yes = output();
+  no = output();
+}

content/4-component-composition/2-emit-to-parent/angular17/app.component.ts

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-root",
+  template: `
+    <p>Are you happy?</p>
+
+    <app-answer-button (yes)="onAnswerYes()" (no)="onAnswerNo()">
+    </app-answer-button>
+
+    <p style="font-size: 50px">{{ isHappy ? "😀" : "😥" }}</p>
+  `,
+})
+export class AppComponent {
+  isHappy = true;
+
+  onAnswerYes() {
+    this.isHappy = true;
+  }
+
+  onAnswerNo() {
+    this.isHappy = false;
+  }
+}

content/4-component-composition/3-slot/angular17/app.component.ts

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-root",
+  template: `<app-funny-button>Click me!</app-funny-button>`,
+})
+export class AppComponent {}

content/4-component-composition/3-slot/angular17/funny-button.component.css

@@ -0,0 +1,12 @@
+button {
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  padding: 10px 20px;
+  font-size: 30px;
+  border: 2px solid #fff;
+  margin: 8px;
+  transform: scale(0.9);
+  box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+  transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+  outline: 0;
+}

content/4-component-composition/3-slot/angular17/funny-button.component.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-funny-button",
+  styleUrls: ["./funny-button.component.css"],
+  template: `
+    <button>
+      <ng-content></ng-content>
+    </button>
+  `,
+})
+export class FunnyButtonComponent {}

content/4-component-composition/4-slot-fallback/angular17/app.component.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "app-root",
+  template: `
+    <app-funny-button></app-funny-button>
+
+    <app-funny-button>I got content!</app-funny-button>
+  `,
+})
+export class AppComponent {}

content/4-component-composition/4-slot-fallback/angular17/funny-button.component.css

@@ -0,0 +1,12 @@
+button {
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  padding: 10px 20px;
+  font-size: 30px;
+  border: 2px solid #fff;
+  margin: 8px;
+  transform: scale(0.9);
+  box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+  transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+  outline: 0;
+}

content/4-component-composition/4-slot-fallback/angular17/funny-button.component.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+
+/**
+ * WARNING
+ * The `ng-content` fallback content will be availabe in Angular 18+.
+ */
+@Component({
+  selector: "app-funny-button",
+  styleUrls: ["./funny-button.component.css"],
+  template: `
+    <button>
+      <ng-content>
+        <span>No content found</span>
+      </ng-content>
+    </button>
+  `,
+})
+export class FunnyButtonComponent {}

content/6-form-input/1-input-text/angular17/input-hello.component.ts

@@ -0,0 +1,14 @@
+import { Component, model } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+
+@Component({
+  selector: "app-input-hello",
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `<p>{{ text }}</p>
+    <input [(ngModel)]="text" />`,
+})
+export class InputHelloComponent {
+  text = model("");
+}

content/6-form-input/2-checkbox/angular17/is-available.component.ts

@@ -0,0 +1,16 @@
+import { Component, model } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+
+@Component({
+  selector: "app-is-available",
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <input id="is-available" type="checkbox" [(ngModel)]="isAvailable" />
+    <label for="is-available">Is available</label>
+  `,
+})
+export class IsAvailableComponent {
+  isAvailable = model(false);
+}

content/6-form-input/3-radio/angular17/pick-pill.component.ts

@@ -0,0 +1,21 @@
+import { Component, model } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+
+@Component({
+  selector: "app-pick-pill",
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div>Picked: {{ picked }}</div>
+
+    <input id="blue-pill" type="radio" value="blue" [(ngModel)]="picked" />
+    <label for="blue-pill">Blue pill</label>
+
+    <input id="red-pill" type="radio" value="red" [(ngModel)]="picked" />
+    <label for="red-pill">Red pill</label>
+  `,
+})
+export class PickPillComponent {
+  picked = model("red");
+}