Armen Vardanyan
@armandotrue.bsky.social
GDE for Angular, front-end team lead. I write articles and talk at conferences
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 😁
What is the ideal maximum length of a single file #Angular component?
I try to limit mine to 120 lines of code, but I have seen more extreme approaches. What do you prefer?
I try to limit mine to 120 lines of code, but I have seen more extreme approaches. What do you prefer?
![@Component({
selector: 'app-item-list',
template: `
<h2>Item List</h2>
<ul>
<li *ngFor="let item of items"
[ngClass]="{ 'completed': item.completed }"
>
{{ item.name }} - {{ item.description }}
<button (click)="toggleCompleted(item)">
Toggle Completed
</button>
</li>
</ul>
<div>
<input type="text"
[(ngModel)]="newItemName"
placeholder="New item name">
<input type="text"
[(ngModel)]="newItemDescription"
placeholder="New item description">
<button (click)="addItem()">Add Item</button>
</div>
`,
styles: `
:host {
display: block;
padding: 20px;
border: 1px solid #ccc;
}
.completed {
text-decoration: line-through;
}
`
})
export class ItemListComponent implements OnInit {
items: Item[] = [];
newItemName = '';
newItemDescription = '';
ngOnInit() {
// Initialize with some default items
this.item](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:66nqhsdbvnegbylgnqdv4rw5/bafkreib7exuvsuhthkhagtikbz3spfey4v5zewzn7svxomka4vkryxn5be@jpeg)
November 19, 2024 at 1:51 PM
What is the ideal maximum length of a single file #Angular component?
I try to limit mine to 120 lines of code, but I have seen more extreme approaches. What do you prefer?
I try to limit mine to 120 lines of code, but I have seen more extreme approaches. What do you prefer?
Did you know that instead of untracking multiple signals individually in a computed/effect, you can use an untracked callback?
The `untrack` function from #Angular call also accepts a callback, and any signal read in the callback won't be tracked.
We can also return the value from `untracked`!
The `untrack` function from #Angular call also accepts a callback, and any signal read in the callback won't be tracked.
We can also return the value from `untracked`!
![@Component({
template: `
<button (click)="increment()">Increment Count</button>
<input [(ngModel)]="text" placeholder="Change text" />
<button (click)="toggle()">Toggle Open</button>
{{result()}}
`,
})
export class App {
count = signal(0);
text = signal('Hi');
open = signal(true);
result = computed(() => {
const count = this.count();
// this computed signal will
// *only* re-execute when `count` changes
// but not when `text` or `open`
// signals update
return untracked(() => {
return `Counted ${count} times,
text is ${this.text()},
boolean value is ${this.open()}`;
});
});
increment() {
this.count.update(n => n + 1);
}
toggle() {
this.open.update(o => !o);
}
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:66nqhsdbvnegbylgnqdv4rw5/bafkreiffau43qoqzsxkykoo2novamfcpg42sblixc3clqpmxcfazepkaf4@jpeg)
November 19, 2024 at 11:52 AM
Did you know that instead of untracking multiple signals individually in a computed/effect, you can use an untracked callback?
The `untrack` function from #Angular call also accepts a callback, and any signal read in the callback won't be tracked.
We can also return the value from `untracked`!
The `untrack` function from #Angular call also accepts a callback, and any signal read in the callback won't be tracked.
We can also return the value from `untracked`!
