CODEWITHSUNDEEP
angularvmware-clarity
Evaldas Buinauskas
Evaldas Buinauskas

Reputation: 14077

Angular Clarity creating sub-components for datagrid

I'm using Clarity's datagrid and would like to build smaller components in order to follow this structure:

This is my grid component template:

<clr-datagrid>
    <app-grid-header></app-grid-header>

    <app-grid-item *ngFor="let city of cities$ | async" [city]="city"></app-grid-item>

    <clr-dg-footer>{{(cities$ | async).length}} cities</clr-dg-footer>
</clr-datagrid>

That's my grid header:

import { Component } from '@angular/core';

@Component({
    selector: 'app-grid-header',
    template: `
        <clr-dg-column>City</clr-dg-column>
        <clr-dg-column>Capital</clr-dg-column>
        <clr-dg-column>Population</clr-dg-column>
        <clr-dg-column>Country</clr-dg-column>
    `
})
export class GridHeaderComponent {}

And that's my grid item:

import { Component, Input } from '@angular/core';
import { City } from '../city.model';

@Component({
    selector: 'app-grid-item',
    template: `
        <clr-dg-row>
            <clr-dg-cell>{{city.name}}</clr-dg-cell>
            <clr-dg-cell>{{city.capital}}</clr-dg-cell>
            <clr-dg-cell>{{city.population}}</clr-dg-cell>
            <clr-dg-cell>{{city.country.name}}</clr-dg-cell>
        </clr-dg-row>
    `
})
export class GridItemComponent {
    @Input()
    city: City;
}

However grid is all messed up if I do it that way: Bad

If I get rid of dedicated dumb components and inline everything, grid looks as expected:

<clr-datagrid>
    <clr-dg-column>City</clr-dg-column>
    <clr-dg-column>Capital</clr-dg-column>
    <clr-dg-column>Population</clr-dg-column>
    <clr-dg-column>Country</clr-dg-column>

    <clr-dg-row *ngFor="let city of cities$ | async">
        <clr-dg-cell>{{city.name}}</clr-dg-cell>
        <clr-dg-cell>{{city.capital}}</clr-dg-cell>
        <clr-dg-cell>{{city.population}}</clr-dg-cell>
        <clr-dg-cell>{{city.country.name}}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer>{{(cities$ | async).length}} cities</clr-dg-footer>
</clr-datagrid>

Expected

I wasn't able to find anything to solve this kind of issue.

I tried to change app-grid-header template to [app-grid-header] and use it as a directive <div app-grid-header></div> but this didn't solve the issue.

I also tried to change encapsulation to other possible options, none of them made an impact.

What change do I have to make in order to make this work as desired?

Upvotes: 0

Views: 1230

Answers (1)

Jeremy Wilken
Jeremy Wilken

Reputation: 6976

The issue comes when you insert your own components that aren't the typical datagrid components, the selectors for what to display don't always work correctly. This is a limitation of how Angular works in general, think of it like CSS selectors that don't match up. This is unrelated to encapsulation mode, as that only affects CSS declared in Angular components and Clarity doesn't use that.

However, you can do this to a degree where you can do this with the clr-dg-row type data. See this demo: https://stackblitz.com/edit/clarity-datagrid-nested-row-7xxlq8?file=app%2Fapp.component.html

In general, it is best to not break a datagrid into smaller components, especially in this example which causes you to have more code than if you didn't break it apart (by adding more components). This is over optimization to the point you have more overhead in many cases. If you have a datagrid you need to reuse, then wrap the whole datagrid into a single component instead.

EDIT: As of Clarity 1.0, this is probably won't work and is not recommended to try and wrap rows inside of a datagrid. There are a number of conflicts that arise and there isn't much gain from wrapping rows.

Upvotes: 1

Related Questions