Bind check box value in to mat table?

Question

TS FILE

import {Component} from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {

  // created offer list table   

  offersColumns = ['SELECT', 'NAME', 'CODE', 'ISACTIVE'];

  offersColumnRowData = [];
  // condition for create new template
  isDataScreen = true;
  // drop down  for selected offer

  offerName = '';
  // form validation for user input for Offer Library
  control = new FormControl('', [Validators.required, Validators.minLength(4)]);

  // level One to level Five Static Data Create new Offer template




  constructor(  ) {
    this.getErrorMsg();

  }
  // method for form validation Offer Library
  getErrorMsg() {
    return this.control.hasError('required') ? 'You must enter a Name here' :
      this.control.hasError('minlength') ? 'You must enter atleast four characters' :
        '';
  }
  // button click even for new new button Offer Library
  createNewData() {
    this.isDataScreen = false;
  };
  backtoDataCreation() {
    this.isDataScreen = true;
  };
}

HTML FILE

<div class="main-content">
  <div class="card">
    <div class="card-header">
      <h5 class="title">Data</h5>
    </div>
    <div class="window-pad no-overflow">
      <mat-tab-group>
        <mat-tab label="Data" class="no-overflow">

          <div *ngIf="isDataScreen ; else NewData">

            <!-- Code for button tab -->
            <div class="-toolbar">
              <p>
                <mat-toolbar>
                  <h4>New Data</h4>
                  <div class="row align-right col-md-offset-9">
                    <button (click)="createExpression()" disabled mat-raised-button>
                      inActive
                    </button>
                    <button color="primary" disabled mat-raised-button>
                      Delete
                    </button>
                    <button mat-raised-button (click)="createNewData()" type="button">
                      Create New
                    </button>
                  </div>
                </mat-toolbar>
              </p>
            </div>

            <mat-table [dataSource]="offersColumnRowData" class="mat-table no-overflow">

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

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

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

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

              <ng-container matColumnDef="LEVEL 1">
                <mat-header-cell *matHeaderCellDef> LEVEL 1 </mat-header-cell>
                <mat-cell *matCellDef="let element"> </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="ISACTIVE">
                <mat-header-cell *matHeaderCellDef> ISACTIVE </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="Active">
                <mat-header-cell *matHeaderCellDef> Active </mat-header-cell>
                <mat-cell *matCellDef="let element"> </mat-cell>
              </ng-container>

              <mat-header-row *matHeaderRowDef="offersColumns"></mat-header-row>
              <mat-row *matRowDef="let row; columns: offersColumns;"></mat-row>
            </mat-table>


          </div>
          <ng-template #NewData>


            <div class="window-pad-height no-overflow">
              <h4>New Offers</h4>

              <div class="row no-overflow">
                <div class="col-md-1 window-pad-height no-overflow">

                  <!-- Write Offer Name here -->
                  <mat-label> Name: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field>
                    <input matInput placeholder="Name" [(ngModel)]="offerName" value="" [formControl]="control"
                      required>
                    <mat-error *ngIf="control.invalid">{{getErrorMsg()}}</mat-error>
                  </mat-form-field>
                </div>
              </div>
              <!-- Write offer Code Here -->
              <div class="row no-overflow">
                <div class="col-md-1 window-pad-height no-overflow">
                  <mat-label> Code: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field>
                    <input matInput placeholder="Code" value="">
                  </mat-form-field>
                </div>
              </div>

              <!-- Write Offer Decription here -->
              <div class="row no-overflow">
                <div class="col-md-1 window-pad-height no-overflow">
                  <mat-label> Description: </mat-label>
                </div>

              </div>



              <!-- Select check box isActive -->
              <div class="row no-overflow window-pad-height">
                <div class="col-md-1 no-overflow ">
                  <mat-checkbox>IsActive</mat-checkbox>
                </div>
              </div>
              <div class="window-pad-height">
                <div class="row col-md-3 no-overflow">

                  <!-- back button for Offer Creation -->

                  <button mat-flat-button color="primary" (click)="backtoDataCreation()">Back</button>
                </div>

                <!-- Save Button for New Created Offer -->
                <div class="col-md-1 no-overflow">
                  <button mat-flat-button color="primary">Save</button>
                </div>


              </div>

            </div>

          </ng-template>

        </mat-tab>






        <!-- Offer Mapping Code Starts Here -->

        <mat-tab label="Data 2">
          Not Yet Implemented !!
        </mat-tab>
      </mat-tab-group>
    </div>
  </div>
</div>

Explaination -> there are two screens and i want to store the check box value as yes or no in MAT TABLE of ISACTIVE column! when i select check box and after clicking on save button in mat table entry should be entere as YES when i deselect check box and after clicking on save button in mat table entry should be entere as NO. stackblitz linke here - > https://stackblitz.com/edit/angular-gbf9kz-uqyihm?file=app%2Ftable-basic-example.html

Answer 1

So here, I added you a form, which once filled in correctly can be registered.

  newOffersForm: FormGroup; //Formulaire
  @ViewChild('formDirective') formDirective: FormGroupDirective; //Erreur formulaire

  ngOnInit() {
    this.newOffersForm = new FormGroup({
      name: new FormControl('', [Validators.required, Validators.minLength(4)]),
      code: new FormControl('', [Validators.required]),
      isActive: new FormControl(false)
   });
  }

All the input of the form creates a "dataObject" object which is push in the list of data of the table.

  dataObject: data;
  offersColumnRowData: data[] = [];

export interface data {
  name: string;
  code: string;
  isActive: boolean;
}

In the form, the value of "isActive" is FALSE by default and TRUE if the checkbox is checked. This is the display in the table that handles the "YES / NO".

<ng-container matColumnDef="ISACTIVE">
  <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
  <mat-cell *matCellDef="let element">{{element.isActive? 'YES':'NO'}}</mat-cell>
</ng-container>

StackBlitz HERE

DEMO: