how to bind data with checkbox angular 2?

Question

JSON

[ {
  "code" : "TEST",
  "projectId" : "PROJECT",
  "name" : "TEST",
  "description" : "test",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : false
}, {
  "code" : "test",
  "projectId" : "PROJECT",
  "name" : "Test",
  "description" : "test 11",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : true
}, {
  "code" : "asdasd2122",
  "projectId" : "PROJECT",
  "name" : "TEST12",
  "description" : "ashdasdhl",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : false
}, {
  "code" : "test1a",
  "projectId" : "PROJECT",
  "name" : "TEST122",
  "description" : "a,sndkajlskdjlkajd",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : true
}, {
  "code" : "dasdasd",
  "projectId" : "PROJECT",
  "name" : "test123123",
  "description" : "asdasdasd",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : true
}, 
 {
  "code" : "asdasdTES",
  "projectId" : "PROJECT",
  "name" : "TEST123",
  "description" : "asdasdasd",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : true
} ]

HTML

            <mat-table [dataSource]="offersColumnRowData" matSort matSortActive="NAME">

          <ng-container matColumnDef="SELECT">
            <mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
            <mat-cell *matCellDef="let element">
              <mat-checkbox>
              </mat-checkbox>
            </mat-cell>
          </ng-container>

          <ng-container matColumnDef="NAME">
            <mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
            <mat-cell *matCellDef="let element">{{ element.name }} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="CODE">
            <mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
            <mat-cell *matCellDef="let element">{{ element.code }} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="DESCRIPTION">
            <mat-header-cell *matHeaderCellDef> DESCRIPTION </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{ element.description}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="CREATEDATE">
            <mat-header-cell *matHeaderCellDef> CREATEDATE </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="UNAME">
            <mat-header-cell *matHeaderCellDef> UNAME </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="ISACTIVE">
            <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
            <mat-cell *matCellDef="let element">
              <mat-checkbox type="checkbox">
              </mat-checkbox>
            </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="offersColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: offersColumns;" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
        </mat-table>

I'm trying to bind values into checkbox! the values in form of boolean (TRUE|FALSE)

I have tried to bind the with check box but its not working

Explaination: goto to my stackblitz -> if i select any checkbox from SELECT column the code column should be selected(i just want to print select column row CODE in console log)

2) how to bind Boolean values into checkbox column that column name is ISACTIVE if active is false check box is not selected if active is true -> checkbox is selected!

Here it is my stackblits link it would be easy for you!

https://stackblitz.com/edit/angular-gbf9kz-a2s4zc?file=app%2Ftable-basic-example.ts

Answer 1

Depending on how complex you're going to go with this, you could either take a forms approach (recommended), or you can add a simple change handler to your checkbox.

COMPONENT

selectedCodes: string[] = [];

receiveCheckboxChange(code: string, value: MatCheckboxChange) {
   console.log(code, value.checked);
   this.updateCodes(code, value.checked);
}

updateCodes(code: string, selected: boolean) {
   const inArrayIndex: number = this.selectedCodes.indexOf(code);
   if (selected && inArrayIndex === -1) {
      this.selectedCodes.push(code);
   } else if (inArrayIndex !== -1) {
      this.selectedCodes.splice(inArrayIndex, 1);
   }
}

isSelected(code: string) {
    return this.selectedCodes.indexOf(code) !== -1;
}

TEMPLATE

<ng-container matColumnDef="ISACTIVE">
    <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
        <mat-cell *matCellDef="let element">
            <mat-checkbox type="checkbox" (change)="receiveCheckboxChange(element.code, $event)" [checked]="isSelected(element.code)">
            </mat-checkbox>
        </mat-cell>
</ng-container>

The key part here being (change)="receiveCheckboxChange(element.code, $event)" - You can supply whatever info you want from the element, or, indeed, the entire element object itself to your function. Then it's up to you to do whatever you want from there.

You will then have an array of selected codes in the variable selectedCodes. What you do with them from there, is up to you.

Blitz: https://stackblitz.com/edit/angular-gbf9kz-sgtrtv

Answer 2

<ng-container matColumnDef="SELECT">
                <mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
                <mat-cell *matCellDef="let element">
                  <mat-checkbox [(ngModel)]="element.Isselected" (change)="change()">
                  </mat-checkbox>
                </mat-cell>
              </ng-container>

in ts file

change() {
    const result = this.offersColumnRowData.filter(x => x.Isselected == true);

console.log('result', result);
  }

Isselected property in json

"Isselected": false,
  "code" : "TEST",
  "projectId" : "PROJECT",
  "name" : "TEST",
  "description" : "test",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : false

Answer 3

Use [checked] and (change) to show if is element.active=true and to change the value of element.active. And use conditional operator to show (or not) the value of element.code

<ng-container matColumnDef="CODE">
  <mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
  <mat-cell *matCellDef="let element">
      {{ element.active?element.code:"" }} 
  </mat-cell>
</ng-container>
...
<ng-container matColumnDef="ISACTIVE">
   <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
   <mat-cell *matCellDef="let element">
     <mat-checkbox type="checkbox" [checked]="element.active" 
                                   (change)="element.active=$event.checked">
     </mat-checkbox>
   </mat-cell>
</ng-container>

Update:Better using ngModel -not [checked] and (change)-

<ng-container matColumnDef="ISACTIVE">
    <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
    <mat-cell *matCellDef="let element">
        <mat-checkbox type="checkbox" [(ngModel)]="element.active">
        </mat-checkbox>
    </mat-cell>
</ng-container>

Answer 4

I updated your stackblitz, check : https://stackblitz.com/edit/angular-gbf9kz-qg9fvw?file=app%2Ftable-basic-example.ts

Bind data on checkbox html tag using [checked]="element.active"

Get active property value using (change)="change(element)"