Armen Vardanyan
@armenvardanyan.dev
GDE for Angular, front-end team lead. I write articles and talk at conferences
Pinned
Armen Vardanyan
@armenvardanyan.dev
· Nov 21
Modern Angular
Discover the new features and techniques of the most modern versions of Angular.</b>
The powerful Angular framework is ever-evolving, with each new iteration bringing amazing new modern features. Mod...
www.manning.com
If you don't know, I've authored a book about #Angular - aptly titled "Modern Angular"
It is approaching print publication and is already available online with early access
You can check it out here:
www.manning.com/books/modern...
It is approaching print publication and is already available online with early access
You can check it out here:
www.manning.com/books/modern...
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 😁
I hope I will continue posting here 😁
ARMEN BACK ON THE REAL APP! This was a real cool stream.
Maybe I should start by posting my latest livestream
We explored so much about Zoneless Angular!
www.youtube.com/live/hfyuzgP...
We explored so much about Zoneless Angular!
www.youtube.com/live/hfyuzgP...
November 28, 2025 at 7:43 AM
I hope I will continue posting here 😁
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? 😁
Maybe I should start by posting my latest livestream
We explored so much about Zoneless Angular!
www.youtube.com/live/hfyuzgP...
We explored so much about Zoneless Angular!
www.youtube.com/live/hfyuzgP...
Pushing Zoneless to the Limit
YouTube video by Angular Space
www.youtube.com
November 27, 2025 at 2:47 PM
Maybe I should start by posting my latest livestream
We explored so much about Zoneless Angular!
www.youtube.com/live/hfyuzgP...
We explored so much about Zoneless Angular!
www.youtube.com/live/hfyuzgP...
Might just start posting here too
November 27, 2025 at 12:14 PM
Might just start posting here too
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? 😁
What concepts from reactive programming do you find the most challenging to explain to beginners?
My bet is on "declarative programming"
My bet is on "declarative programming"
December 4, 2024 at 7:49 AM
What concepts from reactive programming do you find the most challenging to explain to beginners?
My bet is on "declarative programming"
My bet is on "declarative programming"
#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?
My last article seems to be doing quite some rounds...
If you have missed something from Angular v19, check the article out - there are a lot of hidden gems there!
www.angularspace.com/angular-v19-...
If you have missed something from Angular v19, check the article out - there are a lot of hidden gems there!
www.angularspace.com/angular-v19-...
Angular v19 No Signals Edition
Angular v19 is all the rage these days! Of course, everyone talks about SSR improvements, like incremental hydration, linkedSignal and resource/rxResource APIs, and you can already find some articles ...
www.angularspace.com
December 2, 2024 at 12:12 PM
My last article seems to be doing quite some rounds...
If you have missed something from Angular v19, check the article out - there are a lot of hidden gems there!
www.angularspace.com/angular-v19-...
If you have missed something from Angular v19, check the article out - there are a lot of hidden gems there!
www.angularspace.com/angular-v19-...
I ran into an #Angular article today, and I think it is entirely AI-generated
The amount of just plain wrong stuff in it is too astounding to write it off as just a mistake
Honestly, this makes me mad
medium.com/@sehban.alam...
The amount of just plain wrong stuff in it is too astounding to write it off as just a mistake
Honestly, this makes me mad
medium.com/@sehban.alam...
Understanding the Difference Between `ngFor` and `@for` in Angular 17
With the release of Angular 17, developers have witnessed a number of improvements and new features that enhance the overall developer experience. Two of the most discussed constructs in Angular for…
medium.com
November 29, 2024 at 12:40 PM
I ran into an #Angular article today, and I think it is entirely AI-generated
The amount of just plain wrong stuff in it is too astounding to write it off as just a mistake
Honestly, this makes me mad
medium.com/@sehban.alam...
The amount of just plain wrong stuff in it is too astounding to write it off as just a mistake
Honestly, this makes me mad
medium.com/@sehban.alam...
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 🤫
What have been some cases, in your experience, where you purposefully did not use `OnPush` in an #Angular component?
Was the component too large? Did it cause many issues? I'm interested in hearing scenarios
Was the component too large? Did it cause many issues? I'm interested in hearing scenarios
November 25, 2024 at 11:43 AM
What have been some cases, in your experience, where you purposefully did not use `OnPush` in an #Angular component?
Was the component too large? Did it cause many issues? I'm interested in hearing scenarios
Was the component too large? Did it cause many issues? I'm interested in hearing scenarios
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: