Discussion on: I changed my mind. Angular needs a reactive primitive

[Mike Pearson]

Angular

data: Data | undefined;
sub = this.data$.subscribe(data => this.data = data);

onDestroy() {
  this.sub.unsubscribe();
}

Svelte

$: data = $data$;

That little $ prefix is telling Svelte to subscribe and unsubscribe appropriately. It's concise and declarative, but it isn't valid JavaScript; Svelte is a compiler. But it's worth it imo, because Angular's syntax is both verbose and imperative. Subscribing only breaks out of the reactive paradigm if you don't have another reactive paradigm on the other side. Svelte has synchronous reactivity built in.

It even works in callback functions. Here's another example:

Angular

(submit)="saveData()"

saveData() {
  this.data$.pipe(first()).subscribe(
    data => this.service.saveData(data);
  );
}

(Or you could use rxLet and pass up the unwrapped value from the template into the callback function.)

Svelte

on:submit={() => saveData($data$)}

You can play with a Svelte demo I made here

[Mike Pearson]

Updated Example with Signals

Angular

data = toSignal(this.data$);

Svelte

$: data = $data$;

Angular Callback

data = toSignal(this.data$);

(submit)="saveData(data())"

Svelte Callback

on:submit={() => saveData($data$)}