Angular Days

Angular 19 Upgrade

• standalone: true is now the default

Setup

Node: 22.1.0

git clone --recurse-submodules https://github.com/itenium-be/Angular-Days
cd Angular-Days

npm install -g @angular/cli

cd itenium-socks
npm install
ng serve --open

• Chrome: Angular DevTools
• VSCode: Angular Language Service
• Angular CLI

Backend

cd socks-backend
npm install
npm start

Scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Testing

ng test

More Challenges!?

• tomalaforge/angular-challenges
• AngularWave/rxjs-challenge

Signals

• Official docs
• Star Wars Vehicles

Example

import { signal, computed } from "@angular/core";

const counter = signal(0);
console.log(counter());
counter.set(1);
counter.update(curValue => curValue + 1);

const derivedCounter = computed(() => {
  return counter() * 10;
})

With Effect

@Component({})
export class CounterComponent {
  count = signal(0);

  constructor() {
    effect(onCleanup => {
      console.log(`current value: ${this.count()}`);
      onCleanup(() => {
        console.log("Perform cleanup action here");
      });
    });
  }
}

Existing itenium sessions

• ReactiveForms
• RXJS
• Redux