Handling Components Inside another Component in Angular

Question

I am trying to leverage the concept of Component Based Architecture(CBA) in Angular. Following is the scenerio:

I have three components with different selectors. Now, Inside another 4th component, I am trying to import them. This is done by adding their selectors in the laters html file.

4th Component File: component.html

<component1></component>
<component2></component>
<component3></component>
<component4></component> 

All the subcomponents are basically bootstrap tables with data.

Moreover, I am using ngb-pagination to provide pagination in these components.

Now the problem is that whenever I click the sort favicon, the control of the page is transferred to the sub-component's URL which means the entire page is changed. Now, we need to click the favicon again to make the sort appear.

Same problem persists when you change the page number. It might be because angular needs the components URL to make a get query with pageable options.

I am using Jhiptser.

Please let me know if there is a way around..

Following are the screenshots:

This is the main Component which has other components like deployment and rollout:

This is the subcomponent.

Now, whenever I click the sort button (any button) from the main component page, the first click doesnt actually perform the action. It takes to to the sub components page. After that, the functionality is working as expected.

Answer 1

The solution is pretty simple.

Jhipster, by default uses ngb-pagination module for handling pagination.(Server Side).

Using a more popular module like ngx-pagination simply does the job. All we need to do is simply add some pagination controls.

This problem is somehow linked to this open issue .