Fix more JS syntax errors

files/en-us/learn_web_development/core/frameworks_libraries/angular_filtering/index.md

@@ -35,7 +35,11 @@ Now let's move on to adding functionality to allow users to filter their to-do i
 Filtering items builds on the `filter` property, which you previously added to `app.component.ts`:
 
 ```ts
-filter: 'all' | 'active' | 'done' = 'all';
+export class AppComponent {
+  // …
+  filter: "all" | "active" | "done" = "all";
+  // …
+}
 ```
 
 The default value for filter is `all`, but it can also be `active` or `done`.

files/en-us/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md

@@ -173,7 +173,7 @@ So, you could have files with names such as `header.component.ts`, `signup.compo
 You create a component with a `@Component()` decorator that has metadata that tells Angular where to find the HTML and CSS.
 A typical component is as follows:
 
-```js
+```ts
 import { Component } from "@angular/core";
 
 @Component({
@@ -208,7 +208,7 @@ You can define this template either inline or by file path.
 
 To refer to an external HTML file, use the `templateUrl` property:
 
-```js
+```ts
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
@@ -220,7 +220,7 @@ export class AppComponent {
 
 To write inline HTML, use the `template` property and write your HTML within backticks:
 
-```js
+```ts
 @Component({
   selector: "app-root",
   template: `<h1>To do application</h1>`,
@@ -241,7 +241,7 @@ One use of this feature is inserting dynamic text, as shown in the following exa
 The double curly braces instruct Angular to interpolate the contents within them.
 The value for `title` comes from the component class:
 
-```js-nolint
+```ts
 import { Component } from "@angular/core";
 
 @Component({
@@ -269,23 +269,29 @@ You can write component-specific styles directly in the `@Component()` decorator
 
 To include the styles directly in the component decorator, use the `styles` property:
 
-```js
+```ts
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styles: ['h1 { color: red; }']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styles: ["h1 { color: red; }"],
 })
+export class AppComponent {
+  // …
+}
 ```
 
 Typically, a component uses styles in a separate file.
 You can use the `styleUrl` property with the path to the CSS file as a string or `styleUrls` with an array of strings if there are multiple CSS stylesheets you want to include:
 
-```js
+```ts
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrl: "./app.component.css",
 })
+export class AppComponent {
+  // …
+}
 ```
 
 With component-specific styles, you can organize your CSS so that it is easily maintainable and portable.
@@ -297,17 +303,20 @@ This tutorial uses [standalone components](https://angular.dev/guide/components/
 
 It's common to import [`CommonModule`](https://angular.dev/api/common/CommonModule) so that your component can make use of common [directives](https://angular.dev/guide/directives) and [pipes](https://angular.dev/guide/pipes).
 
-```js
+```ts
 import { Component } from "@angular/core";
-import { CommonModule } from '@angular/common';
+import { CommonModule } from "@angular/common";
 
 @Component({
   standalone: true,
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrl: "./app.component.css",
   imports: [CommonModule],
 })
+export class AppComponent {
+  // …
+}
 ```
 
 ## Summary

files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md

@@ -62,14 +62,17 @@ Just as with the `AppComponent`, the `ItemComponent` is made up of the following
 
 You can see a reference to the HTML and CSS files in the `@Component()` decorator metadata in `item.component.ts`.
 
-```js
+```ts
 @Component({
-  selector: 'app-item',
+  selector: "app-item",
   standalone: true,
   imports: [],
-  templateUrl: './item.component.html',
-  styleUrl: './item.component.css'
+  templateUrl: "./item.component.html",
+  styleUrl: "./item.component.css",
 })
+export class ItemComponent {
+  // …
+}
 ```
 
 ## Add HTML for the ItemComponent
@@ -186,9 +189,13 @@ import { ItemComponent } from "./item/item.component";
 
 Then, configure the AppComponent by adding the following to the same file's class:
 
-```js
-remove(item: Item) {
-  this.allItems.splice(this.allItems.indexOf(item), 1);
+```ts
+export class AppComponent {
+  // …
+  remove(item: Item) {
+    this.allItems.splice(this.allItems.indexOf(item), 1);
+  }
+  // …
 }
 ```
 
@@ -201,7 +208,7 @@ For more information on the `splice()` method, see the [`Array.prototype.splice(
 To use the `ItemComponent` UI, you must add logic to the component such as functions, and ways for data to go in and out.
 In `item.component.ts`, edit the JavaScript imports as follows:
 
-```js
+```ts
 import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Item } from "../item";
@@ -211,21 +218,23 @@ The addition of `Input`, `Output`, and `EventEmitter` allows `ItemComponent` to
 By importing `Item`, the `ItemComponent` can understand what an `item` is.
 You can update the `@Component` to use [`CommonModule`](https://angular.dev/api/common/CommonModule) in `app/item/item.component.ts` so that we can use the `@if` blocks:
 
-```js
+```ts
 @Component({
-  selector: 'app-item',
+  selector: "app-item",
   standalone: true,
   imports: [CommonModule],
-  templateUrl: './item.component.html',
-  styleUrl: './item.component.css',
+  templateUrl: "./item.component.html",
+  styleUrl: "./item.component.css",
 })
+export class ItemComponent {
+  // …
+}
 ```
 
 Further down `item.component.ts`, replace the generated `ItemComponent` class with the following:
 
-```js
+```ts
 export class ItemComponent {
-
   editable = false;
 
   @Input() item!: Item;
@@ -275,10 +284,14 @@ To use the `ItemComponent` in `AppComponent`, put the `ItemComponent` selector i
 Angular specifies the selector of a component in the metadata of the `@Component()` decorator.
 In this example, we've defined the selector as `app-item`:
 
-```js
+```ts
 @Component({
-  selector: 'app-item',
+  selector: "app-item",
   // ...
+})
+export class ItemComponent {
+  // …
+}
 ```
 
 To use the `ItemComponent` selector within the `AppComponent`, you add the element, `<app-item>`, which corresponds to the selector you defined for the component class to `app.component.html`.
@@ -301,14 +314,17 @@ Replace the current unordered list `<ul>` in `app.component.html` with the follo
 
 Change the `imports` in `app.component.ts` to include `ItemComponent` as well as `CommonModule`:
 
-```js
+```ts
 @Component({
   standalone: true,
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrl: "./app.component.css",
   imports: [CommonModule, ItemComponent],
 })
+export class AppComponent {
+  // …
+}
 ```
 
 The double curly brace syntax, `\{{}}`, in the `<h2>` interpolates the length of the `items` array and displays the number.

files/en-us/learn_web_development/core/frameworks_libraries/angular_todo_list_beginning/index.md

@@ -100,15 +100,15 @@ You won't use this file until [later](/en-US/docs/Learn_web_development/Core/Fra
 Now that you know what an `item` is, you can give your application some items by adding them to the app.
 In `app.component.ts`, replace the contents with the following:
 
-```js
+```ts
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
 
 @Component({
   standalone: true,
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrl: "./app.component.css",
   imports: [CommonModule],
 })
 export class AppComponent {
@@ -128,7 +128,7 @@ export class AppComponent {
       return this.allItems;
     }
     return this.allItems.filter((item) =>
-      this.filter === "done" ? item.done : !item.done
+      this.filter === "done" ? item.done : !item.done,
     );
   }
 }
@@ -200,13 +200,17 @@ A to-do list needs a way to add items, so let's get started.
 In `app.component.ts`, add the following method to the class after the `allItems` array:
 
 ```ts
-addItem(description: string) {
-  if (!description) return;
-
-  this.allItems.unshift({
-    description,
-    done: false
-  });
+export class AppComponent {
+  // …
+  addItem(description: string) {
+    if (!description) return;
+
+    this.allItems.unshift({
+      description,
+      done: false,
+    });
+  }
+  // …
 }
 ```
 

files/en-us/learn_web_development/core/frameworks_libraries/ember_conditional_footer/index.md

@@ -58,7 +58,7 @@ To get the footer working, we need to implement the following three areas of fun
 
 2. Next, go and find the newly-created `todomvc/app/components/footer.js` file and update it to the following:
 
-   ```js
+   ```ts
    import Component from "@glimmer/component";
    import { inject as service } from "@ember/service";
 
@@ -71,7 +71,7 @@ To get the footer working, we need to implement the following three areas of fun
 
    In `todo-data.js`, add the following getter underneath the existing `all()` getter to define what the incomplete todos actually are:
 
-   ```js
+   ```ts
    get incomplete() {
      return this.todos.filter((todo) => !todo.isCompleted);
    }
@@ -81,7 +81,7 @@ To get the footer working, we need to implement the following three areas of fun
 
 4. Next, add the following action underneath the existing `add(text)` action:
 
-   ```js
+   ```ts
    @action
    clearCompleted() {
      this.todos = this.incomplete;
@@ -148,7 +148,7 @@ This will give us an error, however — in Ember, these simple if statements can
 
 Add the following new getter to `todo-data.js`, just below the existing getters. Note that here we need `this.incomplete.length`, not `this.todos.incomplete.length`, because we are doing this inside the service, where the `incomplete()` getter is available directly (in the template, the contents of the service has been made available as `todos` via the `@service('todo-data') todos;` line inside the footer class, hence it being `this.todos.incomplete.length` there).
 
-```js
+```ts
 get todoCountIsOne() {
   return this.incomplete.length === 1;
 }
@@ -183,7 +183,7 @@ As with the other components, we need a class to access the service.
 
 2. Now go to the newly-created `todomvc/app/components/todo.js` file and update the contents to look like so, to give the todo component access to the service:
 
-   ```js
+   ```ts
    import Component from "@glimmer/component";
    import { inject as service } from "@ember/service";
 
@@ -194,7 +194,7 @@ As with the other components, we need a class to access the service.
 
 3. Next, go back again to our `todo-data.js` service file and add the following action just below the previous ones, which will allow us to toggle a completion state for each todo:
 
-   ```js
+   ```ts
    @action
    toggleCompletion(todo) {
      todo.isCompleted = !todo.isCompleted;

files/en-us/learn_web_development/core/frameworks_libraries/react_interactivity_events_state/index.md

@@ -216,7 +216,7 @@ function handleChange() {
   console.log("Typing!");
 }
 
-...
+// …
 
 // Down in the return statement
 <input