ptemplate | A personal website template that 's not a pain in the ass | Portfolio library

Let's say I have an overlaying modal page students-overlay.component.html

I am using primeng carousel to display the data/items but the requirements ask for the items to be displayed into 2 different rows per page 5 items for each row and then when we click next we are presented with the other items the 11nth. I have tried to manipulate it as much as I can but with no success at best I display 5 items visually correct but when I set [numVisible]="10" it all clumps up into a single row.
Does anyone know how you can achieve this with primeng carousel?

I am using p-table and p-columnFilter components in a modal in my angular project.

I am using the following libraries:

Hi im using primeng carousel but there is problem so carousel height is always based on the highest item. I want to have automatic height for every carousel item.

Is this possible?

Am using PrimeNG's TabView component for a set of Tabs - Home, Appointments, Orders.

The appointments and orders tabs, have a list of links, which navigate to the individual appointment or order, these pages are separate routes/pages, they do not open in the tab.

The first issue is when the user hits the back button, they are taken to the Home Tab by default which is the first tab. The second issue, we need to make it possible for the user to share a link directly to the appointments tab or orders tab.

For both these asks, seems like putting a URL id - "app/main#home" or "app/main#appointments" or a query param : "app/main?tab=home","app/main?tab=appointments" would be good?

I wasn't sure where to be on the ID option, the query param sounded more doable - with a route definition and programmatically selecting the index in ngOnInit.

Does PrimeNG provide something out of the box for this?

Edit: Using Angular 11 with PrimeNG 11.4.4

I have already looked into many questions like this but none of them could help me out. I'm receiving an object that returns a list of cities with their names, habitants and states. Here's my http service request:

I have created a project in Angular 12 version. Then I have installed the most recent version (11.4.5) of PrimeNG controls in my project. Now I have created a page to use PrimeNG Table with sorting and filtering features. Below the header I have another row to contain the textbox for filtering the data.

Now I want, whenever I input any value in the textbox the table rows will automatically be filtered. I don't want to use enter after inputting any value in the textbox for filtering. But I am facing some compiling errors.

HTML file:

In my angular project, I have installed PrimeNG controls version 11.4.4. I have used Table control to create tabular data to show the rows in the group with collapsible style.

Now I have added a textbox and dropdown control right before the header row to filter the table data. But the problem is with Row Group table data, filtering with dropdown is not working always. Only the dropdown item Accessories is working. But for other dropdown item filtering is not working.

Here is my GitHub Repo.

Can anyone please run the code to see the problem and suggest to me how to solve this?

I'm creating some p-table and I tried to add sorting but it's not working. Sorting icon is visible, animation of icon works, data in table is rendering but it is not sorting on header click. I found Primeng documentation and I think I did everything that I should. I've tried a few solutions that I've found in internet but nothing helped me.

my cols in ts file:

Data is beeing fetched from API as array of objects (array example below - there is more data in real data array of course):