I am striving to create a modular reusable table by using directives to generate columns for custom cell content. However, after multiple days of effort, I am unable to access my TemplateRefs and they always turn out empty.
The Angular version being used is v10, due to the project being stagnant in time as per business requirements. The complexity of the issues at hand overwhelms me, making it difficult to pinpoint what might be wrong. There seem to be persistent problems with this approach, pushing me to the brink of frustration.
What could be causing this issue and how can I achieve my goal?
= the component containing the table =
[HTML]
<app-table2 #ordTable [rows]="rows" [columns]="columns">
<ng-template column columnId="order_id" let-row>
{{row.order_id}}
</ng-template>
</app-table2>
[TS]
columns: Table2Column[] = [
{identifier: "order_id", title: "ORDER #"},
...
];
= table component =
[HTML]
<div>table 2</div>
<div class="table-row-{{i}}" *ngFor="let row of rows; let i = index">
<div class="table-cell checkbox-cell">
</div>
<ng-container *ngFor="let column of columns">
<div class="table-cell {{ column.extraClass }}">
<ng-container *ngTemplateOutlet="dict[column.identifier]; context:{$implicit: row}"></ng-container>
</div>
</ng-container>
</div>
[TS]
export interface Table2Column {
identifier: string;
title: string;
sizing?: string;
extraClass?: string;
}
@Directive({
selector: "[column]"
})
export class ColumnTemplateDirective {
@Input('columnId') column!: string;
constructor(public templateRef: TemplateRef<any>) {}
}
@Component({
selector: 'app-table2',
templateUrl: './table2.component.html',
styleUrls: ['./table2.component.scss']
})
export class Table2Component implements OnInit {
@ContentChildren(ColumnTemplateDirective) columnTemplates!: QueryList<ColumnTemplateDirective>;
dict: { [key: string]: TemplateRef<any> } = {};
@Input() rows: Array<any>;
@Input() columns: Array<Table2Column>;
constructor() {}
ngOnInit(): void {}
ngAfterContentInit() {
console.log('asdasdasdsad', this.columnTemplates);
this.columnTemplates.forEach(x => {
this.dict[x.column] = x.templateRef
});
console.log('dict', this.dict);
}
}
No matter what I try, I cannot retrieve the template references. Interestingly, we have successfully implemented a similar technique in another part of the project running Angular 12.
Could this be a version-specific issue that I have encountered?