Skip to main content
Filter by
Sorted by
Tagged with
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 ...
JarMoo's user avatar
  • 13
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 ...
R1D3R175's user avatar
  • 118
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> ...
sevila's user avatar
  • 72
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"> ...
cat1244's user avatar
  • 69
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 ...
Nagarjuna Reddy's user avatar
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 ...
dluisely's user avatar
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: &...
Hitesh Sandal's user avatar
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&...
T_01's user avatar
  • 1,329
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 ...
Konrad Viltersten's user avatar
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 ...
AlexBor's user avatar
  • 295
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 ...
ItsRocketMan's user avatar
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"&...
DeclanMcD's user avatar
  • 1,576
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 ...
Julia's user avatar
  • 217
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 ...
Mark's user avatar
  • 4,879
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 ...
Chinmay Yogi's user avatar
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 ...
Deepak Sharma's user avatar
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 ...
Alejandro Alonso's user avatar
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. ...
Gorba's user avatar
  • 1
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 ...
maxime1992's user avatar
  • 23.7k
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 ...
Eugene Pankov's user avatar
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 ...
Stphane's user avatar
  • 3,436
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 ...
user2024080's user avatar
  • 5,041
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 ...
David's user avatar
  • 43
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 ...
Venfi Oranai's user avatar
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[]; ...
Babulaas's user avatar
  • 820
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: ...
Francesco Borzi's user avatar
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 ...
bvdh's user avatar
  • 155
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 ...
luigi denora's user avatar
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 ...
gt57096's user avatar
  • 11
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 ...
NoRyb's user avatar
  • 1,534
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 ...
Yahya Rechaki's user avatar
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'" : ''&...
DBK's user avatar
  • 403
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 ...
Guvaliour's user avatar
  • 407
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 ...
István Dobai's user avatar
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 ...
namco's user avatar
  • 141
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 ...
Heila Al-Mogren's user avatar
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, ...
Hassen Gaaya's user avatar
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 ...
Rich's user avatar
  • 4,208
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: [...
Waleed Ahmad's user avatar
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 ...
M G's user avatar
  • 554
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 ...
TheRealOha's user avatar
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)="...
tompynation's user avatar
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 ...
Ahmad Hussain's user avatar
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 ...
Alex 's user avatar
  • 13
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%&...
Bartek's user avatar
  • 103
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 ...
Aruna101's user avatar
  • 107
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 ...
zvocs's user avatar
  • 11
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 ...
sridharkctmca's user avatar
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 ...
RDK's user avatar
  • 89
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 ...
cloud-alfakhre's user avatar

1
2 3 4 5
8