Armen Vardanyan
@armandotrue.bsky.social
GDE for Angular, front-end team lead. I write articles and talk at conferences
Pinned
Armen Vardanyan
@armandotrue.bsky.social
· 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...
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:
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
November 21, 2024 at 9:47 AM
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...
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
November 21, 2024 at 8:10 AM
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...
Great to see so much appreciation!
One of the TOP #Angular Space Writers
Delivers far beyond anything you can read.
- v19 Resource API has been
disassembled to the bone
Each detail carefully presented and studied.
I'm glad that appreciation for @armandotrue.bsky.social is showing in numbers!
www.angularspace.com/everything-y...
Delivers far beyond anything you can read.
- v19 Resource API has been
disassembled to the bone
Each detail carefully presented and studied.
I'm glad that appreciation for @armandotrue.bsky.social is showing in numbers!
www.angularspace.com/everything-y...
November 21, 2024 at 7:44 AM
Great to see so much appreciation!
I put a lot of effort into this article - and I mean a lot!
I've read the source code, compiled and tried out examples - to deliver you the latest we know about Resource API
Give it a read to learn more!
I've read the source code, compiled and tried out examples - to deliver you the latest we know about Resource API
Give it a read to learn more!
As Fresh as it gets
As detailed as possible - for now ;)
The Best Resource on the
#Angular v19 Resource API !!!
By one and only @armandotrue.bsky.social
This article is too good!!!
Article: www.angularspace.com/everything-y...
As detailed as possible - for now ;)
The Best Resource on the
#Angular v19 Resource API !!!
By one and only @armandotrue.bsky.social
This article is too good!!!
Article: www.angularspace.com/everything-y...
November 20, 2024 at 4:49 PM
I put a lot of effort into this article - and I mean a lot!
I've read the source code, compiled and tried out examples - to deliver you the latest we know about Resource API
Give it a read to learn more!
I've read the source code, compiled and tried out examples - to deliver you the latest we know about Resource API
Give it a read to learn more!
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: