michael-small

Material examples forked to be zoneless and default CD v22 compatible

Key

✅ = all clear, either already or by combination with forks

## Component

- [Name of example](link to example in doc)

michael-small

Angular 22 and stable signal forms - 2 repos and livestream recording

• My v22 features showcase repo.
  • Collaboration with Jaime Burgos @SkyZeroZx.
• My signal forms experimenting repo.
  • Lots of examples of things from the documentation and beyond.
  • Not everything is a documentation fact, as I have hashed out my own opinions and experiments. But I have gone beyond what the documentation covers, making examples of equivalents of specific reactive forms patterns that have challenged me in the past.

Once StackBlitz supports a node version compatible with Angular 22, I will upload these projects to a respective StackBlitz project.

michael-small

Since LinkedIn can be hard to see stuff if you aren't logged in, I just took this from Daniel's post. But also it was too long to put in the Bluesky comments, lol.

Daniel's post: https://www.linkedin.com/feed/update/urn:li:activity:7363943795341582336/

Signals are rewriting how we think about reactivity in Angular

→ From v16 signal/computed/effect → to stabilized resources in v20

michael-small

// Based on https://github.com/ngxtension/ngxtension-platform/blob/main/libs/ngxtension/filter-nil/src/filter-nil.ts
// https://ngxtension.netlify.app/utilities/operators/filter-nil/

// Use case: `rxMethod`/`signalMethod` of `@ngrx/signals` can only take one argument, so multiple args require one object
// `filterNil()` works great for singular arguments, but not when multiple args need to be in one object

// Example project: https://stackblitz.com/edit/stackblitz-starters-awyeg8su?file=src%2Fmain.ts

export const filterNilObj = <T extends object>() =>
  filter((value: T): value is NonNullable<T> => {

michael-small

import { signalStore, withComputed, withHooks, withMethods, withProps, withState } from '@ngrx/signals';

type StoreState = {
    loading: boolean;
};

const initialState: StoreState = {
    loading: false,
};

michael-small

Prompt: "I am one of few angular frontend devs on my team and constantly am struggling to explain to java folks declarative programming. Would you have any tips on communicating this better? They try to get involved sometimes and do a lot of programming - but get stuck in the imperative way of thinking"

Joshua Morony

A lot of videos pertaining to the motives and benefits of reactivity/declarative. Some of the later videos get more higher level and visual oriented which I think helps.

michael-small

How to Run Angular's source code

I have technically done it, but I haven't directly contributed to the framework's actual source. I have made a couple docs PRs but all but one were just changing markdown. If you want to contribute, the docs are a great place to start. And the source of them is approachable enough, but you can't just run it like a normal Angular CLI project.

But this guide is all stuff I have done to run my own source locally and make some changes to test out. So start from here.

TODO - I have done it a few times and was asked how it works - this is being hashed out as I re-learn the process

Outline

1. How to run some of the latest Angular before even some preview release, without needing to build Angular.

michael-small

// THE ORIGINAL CODE: old.reddit.com/r/Angular2/comments/1gech86/review_my_angular_ecommerce_project/lu9af7b
// Prompt was "Make a less reactive version of this Angular code in Angular 18"... then I pasted in the code in the same prompt

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { OrderServices } from './order.service'; // Adjust the import according to your project structure
import { Order } from './order.model'; // Adjust the import according to your project structure

@Component({
  standalone: true,

michael-small

  "dependencies": {
    "@angular/common": "angular/common-builds",
    "@angular/compiler": "angular/compiler-builds",
    "@angular/core": "angular/core-builds",
    "@angular/forms": "angular/forms-builds",
    "@angular/platform-browser": "angular/platform-browser-builds",
    "@angular/router": "angular/router-builds",
    "@angular/material": "angular/material-builds",
    "@angular/cdk": "angular/cdk-builds",
    "@angular/aria": "angular/aria-builds",