From dadc9ed19444d50a5ace9fdd85cf01fd64d7983a Mon Sep 17 00:00:00 2001
From: Josh Ibbotson <95958816+Joshibbotson@users.noreply.github.com>
Date: Fri, 26 Jan 2024 15:40:04 +0000
Subject: [PATCH] Update trafficlight.component.ts for Angular 17 (#214)

* Update trafficlight.component.ts for Angular 17

Updated traffic light example for newest production version of Angular.

* Update trafficlight.component.ts

Fixed unclosed switch statement
---
 .../angular/trafficlight.component.ts            | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/content/2-templating/6-conditional/angular/trafficlight.component.ts b/content/2-templating/6-conditional/angular/trafficlight.component.ts
index 4235ad45..9c5e18b3 100644
--- a/content/2-templating/6-conditional/angular/trafficlight.component.ts
+++ b/content/2-templating/6-conditional/angular/trafficlight.component.ts
@@ -9,11 +9,17 @@ const TRAFFIC_LIGHTS = ["red", "orange", "green"];
     <p>Light is: {{ light }}</p>
     <p>
       You must
-      <ng-container [ngSwitch]="light">
-        <span *ngSwitchCase="'red'">STOP</span>
-        <span *ngSwitchCase="'orange'">SLOW DOWN</span>
-        <span *ngSwitchCase="'green'">GO</span>
-      </ng-container>
+      @switch (light) {
+        @case("red") {
+          <span>STOP</span>
+          }
+        @case("orange") {
+          <span>SLOW DOWN</span>
+          }
+        @case("green") {
+          <span>GO</span>
+          }
+        }
     </p>
   `,
 })