Hi,
I am trying to create a hierarchical grid.
The html should look something like this.
<grid data="teamRoles">
<band key="teamRole">
<column key="TeamType"></column>
<column key="IncludeInMail"></column>
<column key="Add"><add-button></add-button></column>
<band key="teamMember">
<column key="Name"></column>
<column key="AuditeeArea"></column>
<column key="IncludeInMail"></column>
<column key="Location"></column>
<column key="Phone"></column>
<column key="Remove"><remove-button></remove-button></column>
</band>
</band>
<grid>
The BandComponent:
@Component({
selector: 'band',
directives: [FORM_DIRECTIVES],
template: `
<table class="table table-grid">
<thead>
<tr>
<column *ngFor="#col of columns"
key="col.ColumnKey"></column>
</tr>
</thead>
<tbody>
<tr *ngFor="#item of data">
<td *ngIf="childBand"></td>
<td *ngFor="#col of columns>{{ item[col.ColumnKey]
}}</td>
</tr>
<tr *ngIf="childBand">
<td></td>
<td>
<band key="childBand.key" data="item[childBand.key]"></band>
</td>
</tr>
</tbody>
<table>
`
})
class Band {
@Input() key: string;
@ContentChildren(Column) columns: QueryList<Column>;
@ContentChild(Band) childBand: Band;
@Input() data: any[] = [];
}
My problem is right now, that for every column and childband angular will
create a new instance. It wont use the instances i created in my html code.
On the other hand i cant use ng-content, because i have multiple child
components, that need to be placed in different places.
Someone has an idea how it solve this?
One idea was removing the columns from the dom and placing them by hand
into the TR-Element, but this doesnt seem to be a clean idea.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
