0

I have the following nested structure of components:

<app-orders>
    <app-orders-list><div *ngFor="let order of orders"></div></app-orders-list>
    <app-pagination></app-pagination>
    <app-pagination-showby></app-pagination-showby>
</app-orders>

I am not confident about this structure thus question are:

  1. If app-orders-list has pagination, should be <app-pagination></app-pagination> inside?
  2. If <app-pagination></app-pagination> depends of output parameters showBy from component <app-pagination-showby></app-pagination-showby> - should it be places inside <app-pagination></app-pagination>?

I am a bit confused...

  • I forgot, what is more properly: `
    ` or `` ?     –  Jun 16 '20 at 18:47
  • 1
    what is the purpose of `app-pagination-showby` component? – IAfanasov Jun 16 '20 at 18:49
  • 2
    Honestly you can do whatever you want. Its hard to tell if the structure is good without knowing how any of those component are going to be used or reused. For example if app-pagination always needs app-pagination-showby than yes place it inside and if not using the output can work as long as the parent(app-orders) redirect the information to app-pagination. – ukn Jun 16 '20 at 18:50
  • Purpose of `app-pagination-showby` is return number how much items to show o the page, it is needed for `` –  Jun 16 '20 at 18:53
  • I would make `app-pagination-showby` independent as well so that it could be easily changed to another component. – IAfanasov Jun 16 '20 at 19:05

1 Answers1

1

app-pagination is better to be independent of app-orders-list. this way you can use app-pagination with different views, not only with app-orders-list. Here is an example with ng-bootstrap pagination for inspiration.

Regarding list, possible good designs:

// the word `list` implies that component would accept items to be processed
<app-orders-list [items]='orders">
// if there is a need for item template flexibility, you can make it adjustable
    <ng-template itemTemplateDirective></ng-template>
</app-orders-list>

// if you iterate all items and use a component to display item than it is a `list-item`
<app-orders-list-item *ngFor="let order of orders"></div></app-orders-list-item>
IAfanasov
  • 4,775
  • 3
  • 27
  • 42
  • And how to pass config from `app-pagination` to `app-orders-list`? if they are on the same level? In this case I mess parent component. Also could you comment my comment under my question, please –  Jun 16 '20 at 18:50
  • Link is broken, check please –  Jun 16 '20 at 18:51
  • 1
    The link is fixed. Yes, the data is passed from pagination to `orders-list` throw parent component. This config most likely would be needed for the data requests or maybe for something else. – IAfanasov Jun 16 '20 at 18:55
  • What about *ngfor of whole component instead HTML container inside component? –  Jun 16 '20 at 18:56
  • 1
    Added as well (: – IAfanasov Jun 16 '20 at 19:05
  • What if `` and ` ` have a common configuration? And `` can change one parameter: `showBy` from this configuration object. How to design these components? –  Jun 16 '20 at 19:07
  • Why is it not good to get `orders` directly inside `` using http request? –  Jun 16 '20 at 19:20
  • In your case you put responsibility to get all orders to parent component , is it good? –  Jun 16 '20 at 19:23
  • 1
    the design approach of making one container component handling all the logic and presentational components showing the data and firing the events works great. this way any presentational component could be easily substituted without any changes in all the rest presentational components. when the app gets more complex, another design pattern could suit requirements better. here is a good article about Angular components architecture: https://blog.angular-university.io/angular-component-design-how-to-avoid-custom-event-bubbling-and-extraneous-properties-in-the-local-component-tree/ – IAfanasov Jun 16 '20 at 19:29