Armen Vardanyan
@armenvardanyan.dev
GDE for Angular, front-end team lead. I write articles and talk at conferences
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:
Here's an example of multiple string inputs (array), none of which can be empty:
November 28, 2025 at 12:35 PM
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:
Here's an example of multiple string inputs (array), none of which can be empty:
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...
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...
November 28, 2025 at 11:10 AM
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...
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...
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);
});
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:66nqhsdbvnegbylgnqdv4rw5/bafkreigofjxbixaznlwsft2qx2sqy756qf545qmwmpyybt5xhml73m6wx4@jpeg)
November 28, 2025 at 10:39 AM
It's a slow day, might post signal form examples 😁
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?
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?
November 27, 2025 at 3:34 PM
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?
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?
So, are we sure we know the difference between the two? 😁
November 27, 2025 at 2:55 PM
So, are we sure we know the difference between the two? 😁
Any good resources on steps to upgrade to application builder in v17 without upgrading to v18/v19?
December 16, 2024 at 9:11 AM
Any good resources on steps to upgrade to application builder in v17 without upgrading to v18/v19?
Quick question: do you think about a class getter as "derived state"?
December 10, 2024 at 11:20 AM
Quick question: do you think about a class getter as "derived state"?
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:
Defining forms is easy even without reactive if you know the details. You can use `ngModelGroup` to achieve the same result:
December 9, 2024 at 12:36 PM
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:
Defining forms is easy even without reactive if you know the details. You can use `ngModelGroup` to achieve the same result:
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? 😁
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? 😁
December 9, 2024 at 11:59 AM
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? 😁
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? 😁
#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?
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
#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?
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?
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:
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(),
});
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:66nqhsdbvnegbylgnqdv4rw5/bafkreihmvovkwypoksyfh42ow4w4xpxkfjmist3en3uc646jo77zahi4cm@jpeg)
November 28, 2024 at 2:14 PM
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:
If you want to bind a resource to `ngModel` in your #Angular component template, use its `value` signal, not the resource itself:
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)
Isn't NgRx itself already a facade? A big, complex system with which you interact only via two simple methods (dispatch, select)
November 28, 2024 at 12:18 PM
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)
Isn't NgRx itself already a facade? A big, complex system with which you interact only via two simple methods (dispatch, select)
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?
Do you think this is a bad practice? If so, how can we avoid it? What would be some cases where this is justified?
November 26, 2024 at 2:24 PM
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?
Do you think this is a bad practice? If so, how can we avoid it? What would be some cases where this is justified?
Not something super hard, but important
#Angular linked signals have the same scheduling approach for computations as regular `computed` properties
Computation does not run initially until the value is first read. Subsequently, only new reads will trigger to recompute
#Angular linked signals have the same scheduling approach for computations as regular `computed` properties
Computation does not run initially until the value is first read. Subsequently, only new reads will trigger to recompute
November 25, 2024 at 2:31 PM
Not something super hard, but important
#Angular linked signals have the same scheduling approach for computations as regular `computed` properties
Computation does not run initially until the value is first read. Subsequently, only new reads will trigger to recompute
#Angular linked signals have the same scheduling approach for computations as regular `computed` properties
Computation does not run initially until the value is first read. Subsequently, only new reads will trigger to recompute
I've run into an interesting type issue with #Angular's new `linkedSignal`
Using the previous value argument in computation callback results in an `unknown` type, even when the type returned is super explicit
Any idea why this is the case?
Using the previous value argument in computation callback results in an `unknown` type, even when the type returned is super explicit
Any idea why this is the case?
![export class App {
value = signal('');
// this is being inferred as `WritableSignal<unknown>`
otherValue = linkedSignal({
source: this.value,
computation: (source, prev) => [1],
});
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:66nqhsdbvnegbylgnqdv4rw5/bafkreidfhjx2hr54w6xdbbbagzaow2o6wvkdemq54yhixqoieoz5zvitnu@jpeg)
November 25, 2024 at 1:16 PM
I've run into an interesting type issue with #Angular's new `linkedSignal`
Using the previous value argument in computation callback results in an `unknown` type, even when the type returned is super explicit
Any idea why this is the case?
Using the previous value argument in computation callback results in an `unknown` type, even when the type returned is super explicit
Any idea why this is the case?
My upcoming #Angular v19 article is already under review, and
I'm happy to say exploring the full release docs taught me a lot
Interesting things are coming 🤫
I'm happy to say exploring the full release docs taught me a lot
Interesting things are coming 🤫
November 25, 2024 at 12:11 PM
My upcoming #Angular v19 article is already under review, and
I'm happy to say exploring the full release docs taught me a lot
Interesting things are coming 🤫
I'm happy to say exploring the full release docs taught me a lot
Interesting things are coming 🤫
I think one improvement to #Angular's Resource API would be the addition of initial values
Sometimes the `request` can depend on optional signals, and we might want an easier mechanism of having some default value:
Sometimes the `request` can depend on optional signals, and we might want an easier mechanism of having some default value:
![@Component()
export class SkolComponent {
readonly #dataService = inject(DataService);
optionalId = input<number>();
dataList = rxResource({
request: () => ({id: this.optionalId()}),
loader: ({request}) => {
// I have to do this in order
// to prevent a call without the `id`
if (!request.id) {
return of([]);
}
return this.#dataService.getDataList();
}
});
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:66nqhsdbvnegbylgnqdv4rw5/bafkreif4xxznlftngvzrh7ubzm3tjrlo5lmhbyaimslk4qqprynwtedukm@jpeg)
November 22, 2024 at 11:31 AM
I think one improvement to #Angular's Resource API would be the addition of initial values
Sometimes the `request` can depend on optional signals, and we might want an easier mechanism of having some default value:
Sometimes the `request` can depend on optional signals, and we might want an easier mechanism of having some default value:
November 21, 2024 at 1:19 PM
I'm already writing a new article
I will cover all the more obscure features (some of them I already tweeted about) that got a bit overlooked because of the `linkedSignal`/Resource API hype 😁
Will drop next week! 🚀
I will cover all the more obscure features (some of them I already tweeted about) that got a bit overlooked because of the `linkedSignal`/Resource API hype 😁
Will drop next week! 🚀
November 21, 2024 at 12:05 PM
I'm already writing a new article
I will cover all the more obscure features (some of them I already tweeted about) that got a bit overlooked because of the `linkedSignal`/Resource API hype 😁
Will drop next week! 🚀
I will cover all the more obscure features (some of them I already tweeted about) that got a bit overlooked because of the `linkedSignal`/Resource API hype 😁
Will drop next week! 🚀
#Angular v19 Resolvers will now also accept a `RedirectCommand`!
We can use it to navigate to other pages depending on the data received, or for handling errors
We can use it to navigate to other pages depending on the data received, or for handling errors
![export const productResolver: ResolveFn<Product> = ({ paramMap }) => {
const router = inject(Router);
const productService = inject(ProductService);
const id = paramMap.get('id') ?? 0;
return productService
.getProductById(+id)
.pipe(
catchError(() =>
of(new RedirectCommand(router.createUrlTree(['/error']))),
)
);
};](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:66nqhsdbvnegbylgnqdv4rw5/bafkreifqhqtpo4oew2pyinzk7aysf7kklnlikdqf2c4l7i22m4hmbkarge@jpeg)
November 21, 2024 at 11:35 AM
#Angular v19 Resolvers will now also accept a `RedirectCommand`!
We can use it to navigate to other pages depending on the data received, or for handling errors
We can use it to navigate to other pages depending on the data received, or for handling errors
By the way, if you want to update an #Angular signal of an array using an index, the new `Array.with` method can be useful!
It returns a new array instead of modifying the existing one, which is perfect for pure updater functions like `update` callback or reducers:
It returns a new array instead of modifying the existing one, which is perfect for pure updater functions like `update` callback or reducers:
![@Component({
template: `
@for (count of counts(); track count) {
{{count}} <button (click)="removeCount($index)">+</button>
}
`,
})
export class App {
counts = signal([0, 2, 3, 7]);
removeCount(index: number) {
this.counts.update((n) => n.with(index, n.at(index)! + 1));
}
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:66nqhsdbvnegbylgnqdv4rw5/bafkreidhshmgmo45h2d3wnqd7tx4pz4qktphinuvy34lgfouoksyyltxsm@jpeg)
November 20, 2024 at 12:56 PM
By the way, if you want to update an #Angular signal of an array using an index, the new `Array.with` method can be useful!
It returns a new array instead of modifying the existing one, which is perfect for pure updater functions like `update` callback or reducers:
It returns a new array instead of modifying the existing one, which is perfect for pure updater functions like `update` callback or reducers:
You will be able to provide a `debugName` for signals in #Angular v19
This will become super useful when rich signal debugging tools become available!
This will become super useful when rich signal debugging tools become available!
November 20, 2024 at 12:03 PM
You will be able to provide a `debugName` for signals in #Angular v19
This will become super useful when rich signal debugging tools become available!
This will become super useful when rich signal debugging tools become available!
The new syntactic sugar for app initializer functions is nice!
![export const appConfig: ApplicationConfig = { providers: [ // instead of this provide: APP INITIALIZER, useValue: () => console.log('App initialized'), }, // we can do this: provideAppInitializer(() => console.log('App Initialized')),
]
};](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:66nqhsdbvnegbylgnqdv4rw5/bafkreicqbzev7o7k5qtie4c3dgdx3zbyv6zixvizirz2vxxhvttefuwaay@jpeg)
November 20, 2024 at 10:34 AM
The new syntactic sugar for app initializer functions is nice!
I just updated my personal website 😁
November 20, 2024 at 6:59 AM
I just updated my personal website 😁