Used Framework: Angular 8 with Material Design
I have made a table-template for reusing my structures in different components, so I don´t have to rebuild it again. The table can be used and modified on every component and on desktop view it looks as I expected. Now I added a mobile-Header-Row which should look different and I hoped using *ngTemplateOutlet with a "isMobile"-Property in the Context could solve my problem. But in the component I only receive the data, not the context!?
Does anyone have an idea to solve this?
Used ng-template in my component, where I use my table-component, but it shows nothing. Using ng-container shows me the provided Data.
Part of my template-table:
<ng-container matColumnDef="{{ headerValue.field }}-filter" *ngFor="let headerValue of headerValues">
<ng-container *ngIf="headerValue.isSearchable">
<th mat-header-cell *matHeaderCellDef [class.hidden-below-lg]="headerValue.isMobileHeaderRow">
<trp-input-field
formControlName="{{ headerValue.field }}"
placeholder="{{ 'SEARCH' | translate }}"
class="dark"
></trp-input-field>
</th>
<td
mat-cell
*matCellDef="let element"
[class.hidden-below-lg]="headerValue.isMobileHeaderRow"
[innerHTML]="
(element[headerValue.field] ? element[headerValue.field].toString() : '') | translate
"
></td>
</ng-container>
<ng-container *ngIf="!headerValue.isSearchable">
<th mat-header-cell *matHeaderCellDef></th>
</ng-container>
in my Component:
<app-table-header
[isSearchable]="true"
name="{{ 'TARGET_AGREEMENT.STORES.FIELDS.NAME' | translate }}"
field="name"
[isMobileHeaderRow]="true"
width="260px"
>
<ng-container *appColumnFormat="let targetAgreement">
{{ targetAgreement.name }} -
{{ targetAgreement.rmsId }}
</ng-container>
</app-table-header>
my appColumnFormat-Directive used in my table-header-Directive
@Directive({
selector: '[appColumnFormat]',
})
export class TableColumnFormatDirective {
}
my table-header-Directive
@Directive({
selector: 'trp-table-header',
})
export class TableHeaderDirective {
@Input() public name: string;
@Input() public field: string;
@Input() public width: string;
@Input() public isSearchable = false;
@Input() public isMobileHeaderRow = false;
@Input() public sorting = (_data: any, _sortHeaderId: string):
string => {
return '';
};
@ContentChild(TableColumnFormatDirective, { static: false, read:
TemplateRef })
public template: TemplateRef<any>;
}
I expect to have an context-object in my Component like --> <td mat-cell *matCellDef="let element; let isMobile" [class.hidden-below-lg]="headerValue.isMobileHeaderRow" [innerHTML]="(element[headerValue.field] ? element[headerValue.field].toString() : '') | translate "></td> or something
At the beginning I followed this Tutorial: https://blog.jonrshar.pe/2017/May/29/angular-ng-template-outlet.html
Try this :
In your app-table-header component's view, instead of using innerHTML, use *ngTemplateOutlet
<td mat-cell *matCellDef="let element"
[class.hidden-below-lg]="headerValue.isMobileHeaderRow">
<ng-container *ngTemplateOutlet="template; context: { $implicit: element }"></ng-container>
</td>
The context you pass in this template will trickle down to your structural directive.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.