Bind to Template Reference Variable inside <ng-container> angular

Question

I have the following markup:

<table>
  <thead>
    <th *ngFor="let column of columnNames">
      <ng-container *ngIf="column === 'Column6'; else normalColumns">
        {{column}} <input type="checkbox" #chkAll />
      </ng-container>
      <ng-template #normalColumns>
        {{column}}
      </ng-template>
    </th>
  </thead>
  <tbody>
    <tr>
      <td *ngFor="let model of columnValues">
        <ng-container *ngIf="model === 'Value6'; else normal">
        {{model}} <input type="checkbox" [checked]="chkAll?.checked" />
      </ng-container>
      <ng-template #normal>
        {{model}}
      </ng-template>
      </td>
    </tr>
  </tbody>
</table>

I would like to implement a "Select All" feature.

As you can see, I have the condition in the table header, that if the header name is equal to a certain value, add an input on that header. In the table body, I also have a condition, on whether there should be added an checkbox to the column or not.

When I select the #chkAll checkbox in the table header, I would like the checkboxes in the rows below, to also be selected. I thought that [checked]="chkAll?.checked" on the checkboxes would do the trick, but it does not work.

Here is my Stackblitz

Martin Parenteau · Accepted Answer · 2018-09-25 15:29:39Z

4

Since the chkAll variable is defined in a separate template (created by the ngFor loop of the header), it is not available in the markup of the table body.

You can call a component method when the header checkbox value changes, to perform the check/uncheck of the checkboxes in the rows:

<table>
  <thead>
    <th *ngFor="let column of columnNames">
      <ng-container *ngIf="column === 'Column6'; else normalColumns">
        {{column}} <input type="checkbox" ngModel (ngModelChange)="checkAllBoxes($event)" />
      </ng-container>
      ...
    </th>
  </thead>
  <tbody>
    <tr>
      <td *ngFor="let model of columnValues">
        <ng-container *ngIf="model === 'Value6'; else normal">
          {{model}} <input type="checkbox" #chkBox />
        </ng-container>
        ...
      </td>
    </tr>
  </tbody>
</table>

The checkAllBoxes method uses the QueryList provided by ViewChildren to access the checkboxes:

@ViewChildren("chkBox") private chkBoxes: QueryList<ElementRef>;

checkAllBoxes(value: boolean) {
  this.chkBoxes.forEach(chk => {
    chk.nativeElement.checked = value;
  });
}

See this stackblitz for a demo.

answered Sep 25, 2018 at 15:29

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

monstertjie_za Over a year ago

I did not realize that the template reference variable will not work across different templates. Thanks for your solution, will keep this in mind.

Farasi78 · Accepted Answer · 2018-09-25 15:35:22Z

2

Another way to do this is as follows:

In your template:

<table>
  <thead>
    <th *ngFor="let column of columnNames">
      <ng-container *ngIf="column === 'Column6'; else normalColumns">
        {{column}} <input type="checkbox" #chkAll ngModel (change)="checkAll = chkAll.checked" />
      </ng-container>
      <ng-template #normalColumns>
        {{column}}
      </ng-template>
    </th>
  </thead>
  <tbody>
    <tr>
      <td *ngFor="let model of columnValues">
        <ng-container >
        {{model}} <input type="checkbox" [(checked)]="checkAll" />
      </ng-container>
      <ng-template #normal>
        {{model}}
      </ng-template>
      </td>
    </tr>
  </tbody>
</table>

In your component:

Create a boolean called checkAll.

Here Stackblitz

answered Sep 25, 2018 at 15:35

Farasi78

1,0211 gold badge11 silver badges18 bronze badges

2 Comments

Martin Parenteau Over a year ago

That also works. I think that you can use [checked]="checkAll" (one way binding).

monstertjie_za Over a year ago

I like this approach too. Seem to be learning quite a few useful tips here. Thanks

Collectives™ on Stack Overflow

Bind to Template Reference Variable inside <ng-container> angular

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related