382
questions
1
vote
1
answer
88
views
Angular Calendar Warning: NG0956 - Track by identity caused re-creation of the entire collection
I'm using nz-calendar from ng-zorro-antd in my Angular application. Every time I click on a date in the calendar, I receive the following warning in the console:
NG0956: The configured tracking ...
1
vote
1
answer
35
views
Angular how to swap two components inside dynamic container
I have a dynamic container that shows 2 components at a time using a paginator. I want to be able to swap a component with its previous/next and so far it's working; however, when I try to swap the ...
1
vote
1
answer
42
views
select component dont render values untlil second interaction
The select is not rendering data until the second interaction with him.
<div class="align-items-center">
<label class="form-label">Select Value</label>
...
0
votes
1
answer
29
views
Angular children OnPush Strategy
I have parent component
@Component({
selector: 'parent',
template: '
<div *ngIf="!service.activeTab">DEFAULT</div>
<div *ngIf="service.activeTab">
...
1
vote
1
answer
42
views
Mat-select not updating value of second options list value
In my angular app I have a scenario where I have list of countries and if I select a country it will make an API call and fetched the respective states list. Then if I select state it should display ...
1
vote
1
answer
32
views
Sticky column removed when going to next page of table component
I have a custom table and paginator stand alone components. When I have a table by itself sticky works fine for the column, but when I add a paginator to the table, the sticky is removed whenever I go ...
0
votes
2
answers
185
views
How to force angular not do change detection?
I am trying to have a function which will do sync/async tasks but this should not trigger change detection upon completion. I am triggering this function from the button click in UI.
Template file:
&...
1
vote
1
answer
36
views
What exactly causes the angular component to rerender if not change detection?
Apparently I have a huge missunderstanding about angular's internals.
Consider the following situation:
@Component({
selector: 'banana',
template: ` <h1>We have {{ item.x }} bananas.</h1&...
0
votes
0
answers
41
views
How to handle changes to a field in environment.ts in Angular?
First, due diligence. Here I see how the change detection works. Here is a blog elaborating and explaining the subject. Here I can read about environments. Here I have examples on the change detection ...
0
votes
1
answer
55
views
Change detection in Angular for timers
I was going through the Angular source code trying to find out how change detection is triggered for timers.
I know they are patched, but I can't find a place where the actual change detection is ...
0
votes
0
answers
67
views
PrimeNg make automatically Tab change when button is clicked
I'm having issues with PrimeNG and change detection. I can't work directly with the index (Like "open tab on index 4") because the visibility of some tabs changes, which alters the index ...
2
votes
2
answers
126
views
Confusing Angular behaviour in *ngFor loop
I'm a bit confused over the behaviour of this loop in Angular:
A simple *ngFor loop over an array of 5 fields
<div *ngFor="let field of this.fields" >
<div class="block"&...
5
votes
3
answers
3k
views
toSignal on observables inside signal
With the recent Angular update (we are using v. 17) we started to use Angular signals in our application. There is one problem we are stumpling accross, that we are not sure how to handle properly.
We ...
1
vote
1
answer
78
views
Angular is not detecting changes
I am having a problem with Angular not detecting when an array has no elements.
Parent:
<child
[trainingData]="trainingData"
>
</child>
Child:
@Input() set ...
0
votes
1
answer
75
views
Why to use @input @output over subject/services?
Generally while passing data from child to parent or parent to child we use @input and @output
what are the benefits @input and @output have over subject or services apart from it's the most organic ...
1
vote
1
answer
63
views
POC on Onpush change detection strategy. How do we show the difference?
I am not able to show the performance difference using default and onPush change detection method. Is there is way to prove this concept? I tried searching online and YouTube however I am not able to ...
0
votes
1
answer
339
views
How to Dynamically Re-render Angular Component on Service Data Change
I'm developing an Angular application with a sidebar component that shows different menu items based on the user's data. The menu should only show an "Empresas" option if the user hasn't ...
0
votes
0
answers
74
views
Prevent mat-autocomplete from triggering double change detection on keydown
I am experiencing some performance issues on text input when using mat-autocomplete. Picture one shows the event call tree for a normal input field and picture two shows for a mat-autocomplete field. ...
3
votes
1
answer
123
views
ngOnChanges does not trigger the second time it's called only
We've built a library at work called ngx-observable-lifecycle.
It's basically hooking into all the native hooks of Angular components (ngOnInit, ngOnChanges, etc) and then gives an object where each ...
1
vote
0
answers
60
views
Using a `@ViewChild` in a template binding throws an `ExpressionChangedAfterItHasBeenCheckedError`
Repro: https://stackblitz.com/edit/angular-rjxytd?file=src%2Fmain.ts
I'm trying to use a dynamic @ViewChild field in an *ngIf binding, but the mere act of mentioning it in a template throws ...
2
votes
1
answer
54
views
mat-menu content view is not updated within onPush component
My component (let's call it cmp) has change detection set to "onPush". Its template contains a <mat-menu> with projected content inside. In that content, some div has a click event ...
1
vote
1
answer
47
views
filter not trigger the change event from text input
I would like to understand, why the change deduction is not works, on keyup while integrate the filter using the input value.
when the key ups, I am getting no of empty string popups to prevent the ...
4
votes
1
answer
2k
views
Angular effect() is not getting triggered on state changes from Observable that are updating the component
I am trying to work with Angular 17 effects using the toSignal() interop class to convert an Observable to a signal. I am registering an effect for that signal in the constructor, and I am expecting ...
3
votes
1
answer
157
views
Angular 17 - ExpressionChangedAfterItHasBeenCheckedError thrown despite calling detectChanges
I'm experiencing a slight issue with Angular and its change detection. I've got a very simple form that allows for additional input containers to be added. Yet, every time I click the add button I get ...
1
vote
1
answer
41
views
Angular iterableDiffers not working with a async input
Parent html
<list-component [items]="birds$ | async"></list-component>
list component ts
export class ListComponent implements DoCheck {
@Input() items: ListItem[];
...
0
votes
1
answer
195
views
Angular testing with OnPush Component and fixture.detectChanges() - how to make the unit test reliable?
In my app I have a Component that simply gets some value async via some service and displays it to the user.
The code of the Component looks like the following:
@Component({
changeDetection: ...
4
votes
1
answer
2k
views
Should I use Signals for any variable I want to display in my Angular 17+ component?
With the addition of Signals and the way they improve Change Detection, I'm wondering if I should start using Signals only (instead of class variables) in order to display data in my component ...
1
vote
2
answers
143
views
Wrapped mat-radio component tests input checked property not working
Hi I am trying to wrap the mat radio button and write unit test but im now blocked on this:
"should uniquely select radios by a name".
I am trying to test the wrapped component with some ...
1
vote
2
answers
2k
views
Change detection with RxJs Angular Signals, how to read new data in observable?
I am attempting to utilise Angular's new Signal feature but struggling with reactivity.
Current Method
From understanding so far, to work with RxJS and Signals correctly the output of this observable ...
1
vote
1
answer
58
views
Angular Property Binding to New Object Instance
In Angular (15), if we have a component property (@Input) that is an object - for instance [config]="{ size: 10, label: 'hello' }" - is the object that is instantiated in HTML being ...
1
vote
1
answer
176
views
How to translate an object with ngx-translate in Angular without force its re render?
In our Angular application, we have an internal library that has several components (like headers...) we use them dynamically in our Angular applications, we passing to them some properties (like ...
0
votes
1
answer
45
views
Angular Change Detection and array.includes
Will this line be evaluated every time change detection runs even though the input is a hard-coded set of strings?
*ngSwitchCase="['abc', '123'].includes(item.field) ? "'test'" : ''&...
0
votes
0
answers
56
views
Using common component for handling error in reactive form will affect performance in Angular?
In my project I'm having lots of forms each form contains 50 - 90 fields I'm using reactive form for each field there are set of validations. I have created a common component to display error to make ...
0
votes
0
answers
38
views
MatProgressSpinner value not refreshing
I have a HomeComponent and a SlidesService.
The HomeComponent contains a mat-progress-spinner, which only is showed while the SlidesService is working on a save operation. What I want is to show the ...
0
votes
1
answer
308
views
detectChanges not working for a particular page
The problem I'm facing is the detectChanges() which is not working for a component I was thinking that only my local server running be an issue but I tried to use SWAPI to run the test, here is my ...
3
votes
2
answers
157
views
Will angular recall a function performed on an *ngIf variable every change detection cycle?
I'm a little bit confused regarding the best practice when using a variable with ngIf. Suppose we have the following component that shows error messages. It is a component that is used heavily ...
1
vote
1
answer
243
views
How to handle the refresh of a list of elements after deleting an element in the Backend
Let's say I have the component below. It displays a list of employees fetched from a backend service, and, as you can see, for every employee there is a delete button displayed, which, if clicked, ...
0
votes
2
answers
290
views
Angular Dialog requires extra mouse click to open when using ChangeDetectionStrategy.OnPush
I have an Angular component that utilises the ChangeDetectionStrategy.OnPush strategy. When I attempt to open this component within a dialog using dialog.open(), I have to perform an additional mouse ...
0
votes
1
answer
71
views
Why ngDoCheck is called when setTimeout is resolved?
I'm trying to understand why ngDoCheck runs when setTimeout is resolved.
I've a simple component like this.
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: [...
0
votes
2
answers
1k
views
No accurate documentation on angular change detection
Recently I've been learning and experimenting with angular change detection. What I found out is that it's much different than it's described in most articles and documentation, especially regarding ...
0
votes
1
answer
1k
views
In which order of components is an Angular App instantiated/created?
When generating a basic angular app via ng-cli and creating our own component, which results in a project structure similar to the list below (leaving out all the other clutter for now).
The bootstrap ...
0
votes
1
answer
48
views
Angular 15 - Childcomponent is not updating UI when input has changed
I've got a component containing 2 childcomponents:
<span>Timings:</span>
<sir-project-fasetiming [faseTiming]="projectTiming.timingInitiatie" (faseTimingChanged)="...
0
votes
1
answer
241
views
How to load select-options in Angular through code
I am trying to build a generic form in Angular whose data is going to be fetched at runtime. A form can have fields which may reference to other models. That's why I am trying to fetch the data and ...
0
votes
1
answer
252
views
Best way to render nested FormArrays via *ngFor
I've been doing a project with huge forms lately and I've run into performance problems. After some researching, I wondered, what is the better way to select nested FormArrays from a reactive form ...
0
votes
0
answers
224
views
async subscription in ng-template that is being renedered in [ngTemplateOutlet] of ng-container
I got following ng-templates in my html
<ng-template #jokesApi>
<div class="joke-table" *ngIf="apiJokes$ | async as response">
<table style="width: 50%&...
0
votes
1
answer
121
views
ExpressionChangedAfterItHasBeenCheckedError when using a child component inside a splitter panel
I have an Angular module that contains two Syncfusion components:
MySplitterComponent and MyTreeGridComponent.
MySplitterComponent defines a splitter layout and MyTreeGridComponent defines a TreeGrid ...
0
votes
0
answers
507
views
Is using transloco 't' function from the directive calling the function every time on change detection happens in Angular?
I was wondering about this issue about the "t" function transloco uses in its directive.
When we use functions in our template in angular for, lets say, showing users email. So we write ...
0
votes
2
answers
422
views
How to pass data through service if change detection method exist in one of the component?
I need to update the color of particular box in one component by getting input from second component. For this I am using service to pass data but due to change detection i can't update color. I need ...
0
votes
1
answer
103
views
How to start change detection (valueChanges) inside a ControlValueAccessor
I have a formControl which I'm trying to setValue and then trigger change detection so valueChanges in my other components would get the change i'm setting here- but it's not working. Even if i put ...
0
votes
1
answer
85
views
i have a custom structural directive that using a promise in the ngOnInit to get an auth state from an API that doesn't refresh when i login or logout
I have a custom structural directive that using a promise in the ngOnInit to get an auth state from an API , that directive show or delete element based on an auth state that it gets from an API,
it ...