Group Input in configuration components (component configuration syntax)

Question

I have a very complex component that has a lot of **@Input()**s. For the sake of readability I would like to group the input like DexExtreme's grids do.

DevExtreme grids have a lot of Inputs and they have divided them like this:

<dx-data-grid
    [dataSource]="dataSource"
    [remoteOperations]="false">

    <dxo-paging [pageSize]="10"></dxo-paging>

</dx-data-grid>

As you can see the paging arguments are not passed directly to dx-data-grid but throught a child component dxo-paging. I think this is a very good approach when you have very configurable components.

Anyone knows how to achieve the same result?

Thanks a lot

Lukasz Gawrys · Accepted Answer · 2021-10-08 09:25:37Z

1

It's not really about grouping Inputs but combining components. The key feature which is being used here is called content projection in Angular. It allowes you to fill predefined slots in the parent component with other components, which are passed from the outside.

The example you provided would have following structure. We would have two components: the parent DxDataGridComponent and the child DxoPagingComponent. You can define the inputs on both of them as you wish. Then the parent component needs to have a <ng-content> slot, where the child component will be projected to.

Additionally you can grab a reference to this child component in your parent component by using @ContentChild.

@Component({
    selector: 'dxo-paging',
    template: `
      <!-- Paging stuff -->
    `
})
export class DxoPagingComponent {
    @Input() pageSize;
}

@Component({
    selector: 'dx-data-grid',
    template: `
    <!-- DataGrid stuff -->
    <table>
    </table>
    <ng-content></ng-content>
  `
})
export class DxDataGridComponent implements AfterContentInit {
    @Input() dataSource;
    @Input() remoteOperations;
    @ContentChild(DxoPagingComponent)
    pagingComp: DxoPagingComponent;

    ngAfterContentInit() {
      console.log('Content initialized', this.pagingComp.pageSize);
    }
}

edited Oct 8, 2021 at 9:25

answered Oct 7, 2021 at 17:11

Lukasz Gawrys

1,3364 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3471528 Over a year ago

Thank you @Lukasz. I know what content projection is but I thought that dxo-paging didn't have a template.. I thought it was just a "container of paramenters". I thought that becouse you can configure the Grid also via typescript without using dxo-paging component. You can do something like: this.grid.paging.pageSize = 3 and avoid using the elmenet <dxo-paging>

user3471528 Over a year ago

I also noted that using the Chrome Inspector there is no dxo-paging tag in the html

Lukasz Gawrys Over a year ago

Hm ok - so generally you could remove the <ng-content> slot from template and still access the DxoPagingComponent as I showed in the updated answer. In this way it would not show up in the template but you could access it's inputs and achieve so the desired grouping of inputs.

Collectives™ on Stack Overflow

Group Input in configuration components (component configuration syntax)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related