CODEWITHSUNDEEP
angularhtml-tablengfor
FraPetIm
FraPetIm

Reputation: 65

Angular 7 Display table headers programmatically - *ngFor and *ngIf on same selector

I have an object that defines the headers that a table must have, some of these headers are set to hidden and must not show on the table.

sampleTable: {
headers: [{
  name: 'Description',
  isHidden: false
}, {
  name: 'Active',
  isHidden: false
}, {
  name: 'Code',
  isHidden: false
}, {
  name: 'recordId',
  isHidden: true,
}]
}

In this example, the header named "recordId" is set to hidden = true which means it must NOT DISPLAY

I have tried the obvious:

<tr>
  <th>Fixed Column start</th>
  <th *ngFor="let header of sampleTable.headers" *ngIf="!header.isHidden">{{header.name}}</th>
  <th>Fixed Column end</th>
</tr>

Angular does not support 2 structural directives on the same element.

Subsequently, I have tried:

<tr>
  <th>Fixed Column start</th>
   <template *ngFor="let header of resourceConfiguration.headers">
      <th *ngIf="header.isHidden === true" [nzWidth]="header.width" nzAlign="left">{{header.name}}</th>
    </template>
  <th>Fixed Column end</th>
</tr>

But it only displays the 2 fixed columns.

How can I hide programmatically hide some column?

I know there are several other similar questions but i could not find a solution to this problem although it looks straight forward. Having fixed columns at the beginning and the end complicates this.

The table is a reusable component and based on a configuration object must display different columns.

Upvotes: 1

Views: 1910

Answers (2)

priti negi
priti negi

Reputation: 41

Use ng-container instead of ng-template.

EG:

    <tr>
      <th>Fixed Column start</th>
       <ng-container *ngFor="let header of resourceConfiguration.headers">
          <th *ngIf="header.isHidden === true" [nzWidth]="header.width" nzAlign="left">{{header.name}}</th>
        </ng-container>
      <th>Fixed Column end</th>
    </tr>

Upvotes: 3

ng-hector
ng-hector

Reputation: 1

I think all what you are trying to achieve is already solved and you will have a lot of features available. I would highlight the capability of creating custom behaviours to this component.

My recomendation is Angular DataTables https://l-lin.github.io/angular-datatables/#/getting-started

If you need help with the implementation do not hesitate, drop me a line. Happy Coding

Upvotes: 0

Related Questions