Armen Vardanyan
LightNews LightNews
banner
armenvardanyan.dev
Armen Vardanyan
@armenvardanyan.dev
180 followers 220 following 120 posts
GDE for Angular, front-end team lead. I write articles and talk at conferences
Posts Replies Media Videos
armenvardanyan.dev
I've been thinking, since in Armenia we celebrate Christmas on January 6th instead of December 25th, and the 25th is a Wednesday, why not do one final livestream and sum up the year for Angular? 😁

Would you watch it?
A cozy workspace featuring a laptop displaying the Angular logo on a wooden desk, illuminated by a warm vintage lamp. To the right, a decorated Christmas tree stands beside a bookshelf with a lightbox sign reading "ARMENIA - JAN 6 CHRISTMAS." On the left wall, a calendar highlights the 25th with a circle and the handwritten note "Angular Livestream?".
December 12, 2025 at 1:21 PM
armenvardanyan.dev
During the latest livestream, we also explored two interesting articles touching on the topic of RxJS vs Signals.

Let's talk about them, as you should definitely check them out to get a better grasp of how everything works!
A top-down view of a wooden desk featuring a silver MacBook Pro laptop, a black tablet, and two disposable coffee cups. The laptop screen displays a code editor split into two panels: the left side is labeled "RxJS" and shows imports and a function using observables (e.g., of(), pipe(), tap(), switchMap()), and the right side is labeled "Signals" and shows imports and a function using signals (e.g., signal(), computed()). The title of the comparison on the screen is "RxJS vs Signals".
December 12, 2025 at 11:17 AM
armenvardanyan.dev
Here's another example from yesterday's livestream

You do not need to manually `reload` a signal when the user clicks "next page". Instead, you should think of your resource as dependent on the `page` state and increment the page number when the user clicks. Super easy, fully declarative:
@Component({ template: <button (click)="page.set(page() + 1)">Go to next page</button> <span>{{ todo.value() | json }}</span>, imports: [JsonPipe] }) export class App { page = signal(1); todo = rxResource({ params: () => ({page: this.page()}), stream: ({params}) => { return this.#http.get<Todo[]>( 'https://jsonplaceholder.typicode.com/todos/' + params.page ) }, }); }
December 11, 2025 at 1:48 PM
armenvardanyan.dev
We did a lot of examples with Signals + RxJS on yesterday's livestream, I'm gonna post them all 😁

Here's an example of a resettable timer with `linkedSignal` and an RxJS `interval` Observable:
@Component({ template: <span>{{ timer() }}</span> <button (click)="timer.set(0)">Reset</button> }) export class TimerComponent { timer = linkedSignal<number, number>({ // recompute each second source: toSignal( interval(1_000), {initialValue: 0} ), computation: (newValue, previous) => { // just increment by one each second return (previous?.value ?? 0) + 1; }, }); });
December 11, 2025 at 12:36 PM
armenvardanyan.dev
Don't forget to tune in today! We are going to answer the most crucial question: "When do we use signals and when do we use RxJS?" (and many more)

Tonight, at 4 PM UTC
A promotional graphic for an "Angular Space TV" livestream set against a vivid purple and pink space nebula background. The central image shows a bearded man. Large yellow and white text reads "RxJS vs Signals: When to use which?" followed by the date "December 10, 4PM UTC". The left sidebar displays icons for X, YouTube, Twitch, and LinkedIn, while the top right features the Angular logo.
December 10, 2025 at 1:58 PM
armenvardanyan.dev
Do you know how to stop an `rxResource` from executing immediately so that we can trigger it later manually?
@Component({/* */}) export class SomeComponent { readonly #dataService = inject(DataService); data = rxResource({ // will this execute or not? stream: () => this.dataService.getData(), }); }
December 10, 2025 at 12:19 PM
armenvardanyan.dev
What will this code do? And, more importantly, why?
import { timer } from 'rxjs'; @Component({/* */}) export class SomeComponent { interval = toSignal(timer(0, 100), {requireSync: true}); }
December 10, 2025 at 11:17 AM
armenvardanyan.dev
I'm back 😁

This week, let's talk about RxJS and answer some burning questions I keep seeing Angular devs ask

- Is RxJS no longer needed?
- Should we replace Observables with Signals?
- If we use both, how do we understand when to reach out for what? (1/2)
A promotional graphic for an "Angular Space TV" livestream set against a vivid purple and pink space nebula background. The central image shows a bearded man. Large yellow and white text reads "RxJS vs Signals: When to use which?" followed by the date "December 10, 4PM UTC". The left sidebar displays icons for X, YouTube, Twitch, and LinkedIn, while the top right features the Angular logo.
December 8, 2025 at 1:04 PM
armenvardanyan.dev
No stream today! A very busy week at hand 😁

Promise to be back next week!
A high-angle shot of a wooden desk setup featuring two computer monitors and a black microphone on the left. In the center, open notebooks and a pen sit atop a weekly planner sheet with the handwritten text "BUSY WEEK." A white keyboard and mouse are positioned on the right side.
December 3, 2025 at 12:47 PM
armenvardanyan.dev
Can you guess which of our livestreams was watched by the most people? 😁
A promotional graphic featuring a question and headshots of eight speakers. A purple, space-themed graphic with the headline "CAN YOU GUESS WHICH LIVESTREAM HAD THE BIGGEST AUDIENCE?" and logos for X, YouTube, Twitch, and LinkedIn. It features circular headshots of eight speakers: Armen Vardanyan, Rainer Hahnekamp, Cagatay Civici, Roberto Heckers, Tomas Trajan, Alex Inkin, Gérôme Grignon, and Michael Small.
December 1, 2025 at 12:31 PM
armenvardanyan.dev
For me, the biggest improvement that Signal Forms brings is how easy it is now to create custom control components

No more `ControlValueAccessor` and boilerplate, simply drop some inputs/model signal for value/disabled state/etc, and you're done!

Here's a reusable Rating component example:
@Component({ selector: 'app-rating', template: <div class="rating"> @for (star of stars; track $index) { <span class="star" [class.filled]="$index < value()" [class.disabled]="disabled()" (click)="value.set($index + 1)">★</span> } </div>, }) export class RatingComponent { value = model<number>(0); disabled = model<boolean>(false); stars = [1, 2, 3, 4, 5]; } // elsewhere <app-rating [field]="form.rating" />
December 1, 2025 at 11:15 AM
armenvardanyan.dev
Custom validation is super easy with signal forms, even when the logic is a bit complex; no need to define a separate function, just use `validate` inline.

Here's an example of multiple string inputs (array), none of which can be empty:
Code example, see full code here: https://gist.github.com/Armenvardanyan95/fabb2f8d63e1ecad5b5571bfd8d76949
November 28, 2025 at 12:35 PM
armenvardanyan.dev
Wow, already at least 472 people watched the Zoneless livestream

I feel zoneless is going to continue being a big topic, especially with how it makes Angular simpler again (like the new control flow and standalone)

Watch it here if you missed it: www.youtube.com/watch?v=hfyu...
A dashboard table row showing statistics for a broadcast titled "Pushing Zoneless to the Limit." The status is "ENDED," and the date is Nov 26, 2025 (9:00 PM - 10:43 PM). The metrics display 636 Minutes Watched, 606 Views, and 472 Viewers.
November 28, 2025 at 11:10 AM
armenvardanyan.dev
It's a slow day, might post signal form examples 😁
@Component({ template: ` <form> <input type="email" [field]="form.email" /> <input type="password" [field]="form.password" /> <form> `, imports: [Field] }) export class LoginComponent { credentials = signal({ email: '', password: '', }); form = form(credentials, path => { required(path.email); required(path.password); }); }
November 28, 2025 at 10:39 AM
armenvardanyan.dev
During yesterday's livestream, we discovered that setting the change detection strategy to `OnPush` on the root component (AppComponent) actually does something

Change detection now runs once each time (as opposed to twice). I'm unsure what that means or why this happens. Anyone care to weigh in?
@Component({ template: '{{ logChangeDetection() }}', changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { logChangeDetection() { // somehow this runs once when change detection is set to OnPush // and twice otherwise console.log('AppComponent is being change detected'); } }
November 27, 2025 at 3:34 PM
armenvardanyan.dev
So, are we sure we know the difference between the two? 😁
November 27, 2025 at 2:55 PM
armenvardanyan.dev
Any good resources on steps to upgrade to application builder in v17 without upgrading to v18/v19?
Angular logo
December 16, 2024 at 9:11 AM
armenvardanyan.dev
Quick question: do you think about a class getter as "derived state"?
class Person { constructor( public firstName: string, public lastName: string, ) {} get fullName() { return this.firstName + ' ' + this.lastName; } }
December 10, 2024 at 11:20 AM
armenvardanyan.dev
Did you know you can create #Angular template-driven form groups?

Defining forms is easy even without reactive if you know the details. You can use `ngModelGroup` to achieve the same result:
Code example. See full code here: https://gist.github.com/Armenvardanyan95/e69172bce9135096c25b8a0398436059
December 9, 2024 at 12:36 PM
armenvardanyan.dev
Another just-for-fun question

So, the #RxJS `tap` operator is specifically designed to perform side-effects

However, its implementation is just taking an Observable and returning a new one with the side-effect slapped on it

So, is `tap` itself a pure function or not? 😁
Implementation of the RxJS `tap` operator. See the full code here: https://github.com/ReactiveX/rxjs/blob/master/packages/rxjs/src/internal/operators/tap.ts
December 9, 2024 at 11:59 AM
armenvardanyan.dev
#NgRx ESLint ruleset has a rule that prohibits mapping Observables from the store to be mapped in component

Instead, it encourages the use of new, derived selectors and a direct selection of the state

I believe we should not create computed properties from store signals

What do you think?
December 2, 2024 at 3:13 PM
armenvardanyan.dev
When we make HTTP calls in #Angular, sometimes we need to map the response to something else

With `rxResource`, would you prefer to do it with an #RxJS operator, or with a computed/linked signal?

I prefer doing it with RxJS, but I want to hear opinions
Code example See the full code here: https://gist.github.com/Armenvardanyan95/2c0df50f7670534a90ec21b9331320e3
December 2, 2024 at 11:33 AM
armenvardanyan.dev
Important to remember: while `Resource` implements some methods from `WritableSignal` (set, update), it is not itself a signal.

If you want to bind a resource to `ngModel` in your #Angular component template, use its `value` signal, not the resource itself:
@Component({ template: ` <!-- not like this --> <!-- <input type="email" [(ngModel)]="email" /> --> <!-- but like this --> <input type="email" [(ngModel)]="email.value" /> `, }) export class ChangeEmailComponent { readonly #userService = inject(UserService); email = rxResource({ loader: () => this.#userService.getCurrentUserEmail(), }); }
November 28, 2024 at 2:14 PM
armenvardanyan.dev
I never understood why people would make Facades for #NgRx, I don't get the point.

Isn't NgRx itself already a facade? A big, complex system with which you interact only via two simple methods (dispatch, select)
Picture of a building's facade with the NgRx logo and the word "Facades" superimposed on it
November 28, 2024 at 12:18 PM
armenvardanyan.dev
You can call methods of a child component in #Angular templates via a reference variable

Do you think this is a bad practice? If so, how can we avoid it? What would be some cases where this is justified?
@Component({ selector: 'app-child' }) export class ChildComponent { someMethod() {} } @Component({ template: ` <app-child #child/> <button (click)="child.someMethod()"> Call a method from child Component </button> `, }) export class ParentComponent {}
November 26, 2024 at 2:24 PM