Closed JimmyBjorklund closed 10 months ago
We're unable to replicate your issue, if you are able to create a reproducer by using PrimeNG Issue Template or add details please edit this issue. This issue will be closed if no activities in 20 days.
https://stackblitz.com/edit/github-4z4rkv?file=src%2Fapp%2Fapp.component.ts If i remove the primeflex it stops working, much like my app but i i add flex to my project it still is broken. Might be some other depenacy that i am missing.
@JimmyBjorklund Please fix string in app.component.html
file (name of template):
instead of
<ng-template pTemplate="this.selected">
should be
<ng-template pTemplate="selectedItem">
@cetincakiroglu See similar issue #14320
That fixes the initial load state when it works, but in my case it do not even load the page and i need to kill the browser compleatly as it hang the entire page.
I don't see any issue in the example. Could not replicate the mentioned behavior. Could you please guide me how to reproduce it?
I have a similar issue, if I have a function returning my objects for the dropdown options. The browser is freezing because it recalls the method all the time in a loop. zone Version 0.14.4, e.g. [options]="getArray() | async "
I also have this issue of the browser freezing upon template with <p-dropdown>
I'm using:
import { Component } from '@angular/core';
import { DropdownModule } from 'primeng/dropdown';
@Component({
selector: 'app-test-p-dropdown',
standalone: true,
imports: [DropdownModule],
template: '<p-dropdown [options]="options"></p-dropdown>',
styles: '',
})
export class TestPDropdownComponent {
options = [];
}
Notice the only difference is the .slice()
method call on options
import { Component } from '@angular/core';
import { DropdownModule } from 'primeng/dropdown';
@Component({
selector: 'app-test-p-dropdown',
standalone: true,
imports: [DropdownModule],
template: '<p-dropdown [options]="options.slice()"></p-dropdown>',
styles: '',
})
export class TestPDropdownComponent {
options = [];
}
@cetincakiroglu I tried to make the example as small as possible for you to be able to replicate the issue. Could you update the labels.
Btw. notice that it is not the slice()
function call from my example that is causing the issue, but like @stefhorst mentioned, the issue occurs when the options are return by a function.
E.g. the following code also produces the error:
import { Component } from '@angular/core';
import { DropdownModule } from 'primeng/dropdown';
@Component({
selector: 'app-test-p-dropdown',
standalone: true,
imports: [DropdownModule],
template: '<p-dropdown [options]="options()"></p-dropdown>',
styles: '',
})
export class TestPDropdownComponent {
options() {
return [];
}
}
options
here it works https://stackblitz.com/edit/github-4z4rkv-mkxhp5?file=src%2Fapp%2Fapp.component.html
I also have this issue of the browser freezing upon template with
<p-dropdown>
I'm using:
- Primeng v17.3.0
- angular/core v17.0.8
- angular/common v17.0.8
- angular/forms v17.0.8
- rxjs v7.8.1
- zone.js v0.14.2
This code works:
import { Component } from '@angular/core'; import { DropdownModule } from 'primeng/dropdown'; @Component({ selector: 'app-test-p-dropdown', standalone: true, imports: [DropdownModule], template: '<p-dropdown [options]="options"></p-dropdown>', styles: '', }) export class TestPDropdownComponent { options = []; }
This code does NOT work
Notice the only difference is the
.slice()
method call on optionsimport { Component } from '@angular/core'; import { DropdownModule } from 'primeng/dropdown'; @Component({ selector: 'app-test-p-dropdown', standalone: true, imports: [DropdownModule], template: '<p-dropdown [options]="options.slice()"></p-dropdown>', styles: '', }) export class TestPDropdownComponent { options = []; }
Correct usage as below:
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [showClear]="true" placeholder="Select a City"></p-dropdown>
options = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ];
cities: any[];
ngOnInit(){
this.cities = this.options.slice(0,1)
}
I can confirm that the issue i have is more or less the same if i have a private variable called devices and a property that return this.devices || [] then it hangs for ever but if i make the variable public then it works. Something is broken here.......
@cetincakiroglu thanks for your reply. With this hint I managed to workaround.
I still don't understand why the correct usage is to "not use a function call" in the template as in my first example [options]=options()
. In primeng v16 this worked fine.
For the issue with the slice()
call I used the solution with ngOnInit you gave.
For another situation that gave the same issue I found a solution with the new Angular signals.
import { Component, Signal, computed } from '@angular/core';
import { DropdownModule } from 'primeng/dropdown';
@Component({
selector: 'app-test-p-dropdown',
standalone: true,
imports: [DropdownModule],
template: '<p-dropdown [options]="options()"></p-dropdown>',
styles: '',
})
export class TestPDropdownComponent {
options: Signal = computed(() => {
return [];
});
}
Still I think the issue reported here is a bug and that the issue should be reopened. But that is up to you.
Thank you for the reply.
How can this be closed? If you need to dynamically create a list of items at runtime, @cetincakiroglu this is still an issue.
@pscanlon1 your are right. it's a critical bug. Though it's not good practice to have functions as options, it's sometimes necessary, to use it especially with params. At the moment the dropdown is a critical component in primeng. please consider open it again @cetincakiroglu
@pscanlon1 your are right. it's a critical bug. Though it's not good practice to have functions as options, it's sometimes necessary, to use it especially with params. At the moment the dropdown is a critical component in primeng. please consider open it again @cetincakiroglu
It looks like _options in the angular 17 branch was changed from
_options: any[] | undefined;
to
_options = signal<any[] | undefined>(null);
I can confirm that the issue i have is more or less the same if i have a private variable called devices and a property that return this.devices || [] then it hangs for ever but if i make the variable public then it works. Something is broken here.......
+1
How can this be closed? If you need to dynamically create a list of items at runtime, @cetincakiroglu this is still an issue.
Could you please share a stackblitz example so we can identify the issue?
@cetincakiroglu I have the same issue with slice.
It seems like an incompatibility between Angular's SlicePipe
and PrimeNg v17
A general guess, SlicePipe
is not a Pure Pipe and has Angular's own logic implemented inside that doesn't work like a native slice
Slice
pipe with PrimeNg v15
and v17
Describe the bug
I have a page with this code and its bin working fine in angular 16 but after the upgrade to 17 it hangs the load of the page for ever.
Environment
Reproducer
No response
Angular version
17.0.7
PrimeNG version
17.1.0
Build / Runtime
TypeScript
Language
ES5
Node version (for AoT issues node --version)
v20.10.0
Browser(s)
Edge Version 120.0.2210.77 (Official build) (64-bit)
Steps to reproduce the behavior
No response
Expected behavior
No response