354 questions
1
vote
1
answer
22
views
How do I pass error state from Angular 21's new FormValueControl to the outside?
I have implemented a simple custom control using Angular 21's new FormValueControl, see StackBlitz:
export interface Test {
booleanValue: boolean;
stringValue: string;
numberValue: number;
}
@...
- 3,437
Best practices
0
votes
0
replies
25
views
Angular Signal Forms with Resources
When building a component that uses Signal Forms to edit an object, the object needs to be loaded and then updated into the formModel. I want to use a pure Signal/Resource solution as opposed to using ...
- 6,787
1
vote
2
answers
116
views
Angular 21 Signal Forms: TypeError: this.field(...) is not a function
I have written a very simple component that implements FormValueControl and uses a signal form internally, see below:
import { ChangeDetectionStrategy, Component, model } from '@angular/core';
import ...
- 3,437
-3
votes
0
answers
74
views
Is it good practice to keep HttpClient subscriptions inside an Angular signals-based service? [closed]
I'm experimenting with Angular (with signal and inject) and I'm trying a pattern where a service acts as a small state manager:
The service holds the state in signals (loading, error, items, etc.).
...
- 159
Best practices
1
vote
1
replies
54
views
Angular Signals Objects with Forms
I have the following in an older Angular app.
newTask: Task = { id: 0, description: '',
completed: false, priority: Priority.Normal };
<div>
<input [(ngModel)]="...
- 11
1
vote
3
answers
86
views
Send Observable result to child component as Signal
In my code I am trying to get the result from this observable:
// Runs fine
obtenerOfertaPorId(id: number): Observable<Oferta> {
return this.http.get<Oferta>(`${this.apiUrl}${this....
1
vote
1
answer
86
views
How to reset field, based on other fields value change?
I’m using Angular 21’s new Signal Forms. I have a search form where the user types a query, receives a paginated result list, and can move between pages.
When the user changes the search phrase, I ...
- 715
0
votes
2
answers
79
views
How to bind a form to a single object signal and keep fields in sync?
I'm trying to migrate a simple template-driven form to use Angular Signals.
I’m on Angular 19 (standalone components, using FormsModule) and I would like to:
Keep one object for the product (product)
...
1
vote
2
answers
269
views
How to provide default values for individual fields in Angular 21 Signal Forms (without UI flicker) when implementing a FormValueControl?
We're starting to look at Angular 21's new signal-based forms, but I can't find a clean way to define default values for each form field, especially when building forms for objects where multiple keys ...
- 3,437
1
vote
0
answers
86
views
Angular @for Loop Not Updating When Signal is Truncated
Background:
I am working on an Angular 20.3.10 application where I use signals for managing the state of a collection of toast messages. I have SSR and Zoneless enabled and have a web worker ...
- 109
Best practices
1
vote
3
replies
95
views
Angular Signals and methods in templates
It is good practice to use signals in templates and bad practice to use methods.
But signals and methods?
Example (using the get method from Map):
userStatuses: WritableSignal<Map<string, string&...
- 147
2
votes
1
answer
134
views
Angular effect calling method which sets other signal
In angular, if I have an effect which calls some method which further on sets some other signal, will that effect be bind to that "other signal" or just signals called directly inside the ...
- 1,572
1
vote
1
answer
48
views
Assume that a signal isn't empty when used inside an @if?
Let's assume you have the following code:
$mySignal = signal<number | undefined>(1)
@if ($mySignal()) {
<foo [item]="$mySignal()"></foo>
}
I got:
Type 'number | ...
- 9,119
1
vote
1
answer
64
views
Angular compile error using strict templates with @if optional chaining
I'm currently running into an issue/question about optional chaining in Angular. I'm running Angular 20, with "strictTemplates": true enabled as angularCompilerOptions and "strict":...
- 11
0
votes
1
answer
108
views
NG8: Type 'Signal<User[]>' must have a '[Symbol.iterator]()' method that returns an iterator
I am stuck with above error. [NG8: Type 'Signal<User[]>' must have a '[Symbol.iterator]()' method that returns an iterator.] I am using ngrx/signal-store for data management with my angular app. ...
- 15.5k
0
votes
2
answers
122
views
NgRx signal store throws error "Type 'Signal<User[]>' is not assignable to type 'User[]'"
Interface:
export interface User {
userId: number;
userName: string;
emailId: string;
role: string;
}
export interface UserState {
users: User[];
_users: User[];
}
export const ...
- 15.5k
2
votes
1
answer
88
views
Angular input signal: how to accept `string | undefined` from parent but always get `string` inside the component?
I created this simple component that has two inputs that both accept a string and in theory should accept undefined because they have a default value.
@Component({
selector: 'app-child',
imports: [...
- 181
2
votes
1
answer
80
views
How to derive state from required inputs without ngOnInit and constructor?
I'm refactoring an Angular component to use signals throughout, but I'm stuck on how to properly initialize a signal that depends on required inputs without using ngOnInit. I am trying to see in this ...
- 117
1
vote
2
answers
174
views
Angular 20 Reactive Forms - Custom validator based on signal
Here's the StackBlitz showing the problem.
I have a reactive form with an Email field and Send Verification Code button. When the code is sent, the Verification Code field appears, so the user can ...
- 4,684
2
votes
1
answer
55
views
Angular dynamic questions causing infinite re-renders
I am trying to generate dynamic forms based on a set of questions I receive from an API.
When the app inits I will dispatch a state action that will call the mock API to get the questions and then the ...
- 103
2
votes
2
answers
641
views
Using toSignal() with a required Input Signal
I have an Angular 20 application with a Component that fetches logs from a bookService based on a required Input. The service returns an Observable.
I tried to transform the Observable from the ...
- 3,241
1
vote
1
answer
82
views
Angular Complex LinkedSignal
I have been playing with Angular Signals for a while.
Recently I encountered a problem that I can fix but it felt not nice.
I have a array of items and each time the count goes up, I need to show an ...
- 11
2
votes
1
answer
74
views
Unable to use @for loop on array of custom objects. Receiving error
Using Angular V18. Attempting to use the @for loop to render multiple child components, but receiving error "Type 'InputSignal<LoopTile[]>' must have a 'Symbol.iterator' method that returns ...
- 75
-4
votes
1
answer
274
views
toSignal() cannot be called from within a reactive context [closed]
When I subscribe and update the signal getting error as follows.
Error detail:
ERROR RuntimeError: NG0602: toSignal() cannot be called from within a reactive context.
Invoking toSignal causes new ...
- 15.5k
1
vote
1
answer
120
views
Getting error while convert existing code to use signal in HttpClient put method (Angular 20)
I am new to Angular. I started with Angular 19 that were using zone.js for change detection. But then I moved to Angular 20 and now I am using zoneless. I have a put method call that I am trying to ...
- 8,770
2
votes
1
answer
139
views
Does the httpResource have an HttpContext?
httpResource got released as an experimental feature in Angular 19.2. The httpResource uses the HttpClient under the hood. So I was hoping, I would be able to pass all the options I could pass to the ...
- 1,169
1
vote
1
answer
125
views
Test coverage not detected with toSignal and debounceTime
I have a component in my Angular project (v18.2.13) that has a reactive form to change a price field & an observable with the product info. I want to make a signal to know if the price form field ...
- 83
1
vote
2
answers
95
views
Angular signals not updating select value
I have a reusable angular component that handles cursor based pagination. However, the select value never changes on the HTML side, yet the change detection works.
Example, select options are 10, 25, ...
- 435
1
vote
1
answer
243
views
Multiple resource API calls in Angular
I am trying to understand the new Angular resource API. One typical problem is to fetch several HTTP endpoints, combine the data and use it.
My current approach looks like this:
name = rxResource({ ...
- 672
1
vote
1
answer
95
views
Resource called twice in SSR Application
I'm working with a SSR Angular 20 and noticed Resource could be called twice :
Here's an example of the code:
Service:
code = signal<string | undefined>(undefined);
authCode = resource<
{ ...
- 41
2
votes
2
answers
224
views
Angular template conditional rendering and signal inputs
I have this input:
customHTMLContent = input<string>()
In my HTML template calling this works:
<p>{{ customHTMLContent }}</p>
And this doesn't:
<p>{{ customHTMLContent() }}&...
- 143
1
vote
1
answer
243
views
Using input signals directly vs. making computed signals
I am working in Angular using the new signals API. I have an input signal that I am reading to create other computed signals, and am also directly reading inside of a template, like so:
Template:
<...
1
vote
1
answer
423
views
How to bind outputs to ng-template in Angular 20?
I'm doing the following, which works as expected.
<ng-container
*ngComponentOutlet="
step.component | async;
inputs: {
someId: someId,
stepper: stepper,
step: step,
...
- 40.3k
2
votes
1
answer
495
views
Angular Signal Effect inside our outside Constructor [closed]
Does Angular have any guidance where I should put the Effect code? Is it generally inside Constructor or outside? What are the advantages / disadvantages for each method?
export class CustomerForm {
...
- 1,357
1
vote
1
answer
109
views
Can't access inputs from host directive to HTML template
In the docs for Angular host directive, it's stated that I can use my inputs/outputs in the template like this.
@Component({ ...
template: "ID {{someId}}",
hostDirectives: [ { directive: ...
- 40.3k
1
vote
1
answer
434
views
How to delete an item in an immutable signal array or a key/value in a signal object? [closed]
To update items into an immutable array, we can easily do:
array = signal([1,2,3]);
...
...
this.array.update(item => [ ...item, 'newItem' ]);
To update items into an immutable object easily do:
...
- 571
0
votes
1
answer
94
views
How to Execute Logic After Store Update Using Signals in Angular?
I’ve built a signal store that includes all the necessary methods.
Component A
In this component, I have a navigateToUser() function where I call this.userStore.loadUser().
This method makes an API ...
2
votes
1
answer
485
views
How to iterate over a Angular signal object in the html by using @for
In the html, I have to iterate over a WritableSignal object variableList(), but this html code will not run the loop unless the json string of the variableList() will show correctly in the same html.
...
- 571
4
votes
1
answer
92
views
How to Update an Immutable Signal Object which is itself a AppComponent Property?
I am struggling with a simple plain object, which is itself a property of AppComponent. This object "x" is wrapped as a writable signal.
I want to implement a method which updates the own ...
- 571
3
votes
1
answer
124
views
How to wrap an object contains a metric unit e.g. length= 10 m with Angular signals?
What is the correct implementation for an object in the signal world of angular?
A) all wrapped with signal as:
length = signal({
nominalValue: signal(0),
unit: signal ("mm")
})
B) ...
- 571
2
votes
1
answer
95
views
How to handed a relationship between two signals by linkedSignals in Angular v20?
I have to mange a relation for X*2=Y, there Y and Y are input fields.
In the moment, I trigger by a change of the input field the related variable as
X changed => Y=X*2
Y changed => X=Y/2
import ...
- 571
1
vote
1
answer
151
views
Async pipe not updating HTML
This might be a common problem but somehow i keep hitting wall with it
HTML
@if(data$ | async; as data) {
<span>{{data.status}}</span>
}
TS
dataId = input.required<string>();
data$ =...
- 8,590
0
votes
1
answer
107
views
How to properly mock NGXS Select in a component using the Store
I have a component that fetches some information from a NGXS Store, that I need to create unit tests for. The component looks like this:
@Component({
standalone: true,
selector: 'app-task-...
- 131
1
vote
1
answer
202
views
How to use @ViewChild with signals and effect() in Angular?
I'm using Angular 17+ with signals, and I ran into a problem when trying to control a <mat-sidenav> via a shared service and @ViewChild.
I created a SidenavService that exposes a signal, which ...
- 11
2
votes
1
answer
104
views
We need to nest Angular Signals inside another Signal for objects and arrays?
I've made a set of interfaces which describes JSON data. Then I used classes to compose the same data but as Angular Signals:
// TToSignal.ts
import { WritableSignal } from '@angular/core';
export ...
- 1,404
1
vote
1
answer
250
views
What is the best practice for an authGuard (CanActivateFn) with Angular Signals and httpResource for asynchronous authentication status?
I'm using Angular (v20) with Signals and httpResource from @angular/common/http to manage my user's state and authentication. My AuthService exposes a currentUserResource that loads user information ...
- 453
1
vote
1
answer
171
views
How to cache query results during re-computation in Angular (19+) Signals?
This is actually a follow-up question of Is there a way to dynamically compute rxResource() or resource() in Angular (19)
We have a list of queries that is computed based on some component state. We ...
- 3,437
1
vote
2
answers
70
views
Prevent last emission - causes duplicate message
I need the LAST emission to call signals.onResponse(), thus the tap, so that my deep chat ui completes and re-enables the submit button after last message. I have to hack deep chat and use the ...
- 463
2
votes
1
answer
133
views
Input based signal check gives not a function error
I have an input signal which I take and set as attribute but in browser I see an error
this.width is not a function
export class SkeletonComponent implements OnInit {
readonly width = input<...
- 641
0
votes
1
answer
79
views
I want to initialize my input signal with a default class and some data manipulations
I am using this package, ang-jsoneditor, which contains the below initialization code.
@Component({ ... })
export class AppComponent {
public editorOptions: JsonEditorOptions;
public data: any;
/...
- 66.3k