Angular mat-checkbox how to use with htminputelement?

Question

In my project, I want to send it to the backend by setting true or false with the Angular Material Checkbox. I have tried different versions many times, but I am having problems sending information with the htmlinputelement I use. I kindly request your help in this regard.

contract ts:

   export class Create_Product {
        nitrogen:Boolean;
    }

ts:

      ngOnInit(): void {
        this.productValidation = this.formBuilder.group({
          nitrogen: [false]
    }

  @Output() createdProduct: EventEmitter<Create_Product> = new EventEmitter();

  create(conductance:HTMLInputElement,nitrogen:HTMLInputElement) {
  create_product.conductance=parseFloat(conductance.value);
  create_product.nitrogen=Boolean(nitrogen.value);
}

Html

<div class="container-fluid">
  <p style="text-align: center; font-weight: bold; font-size: 20px;color: rgb(13, 13, 190);">Add Product</p>
  <form class="example-form" [formGroup]="productValidation">

    <mat-form-field appearance="outline" class="product-create">
      <mat-label>Nitrogen</mat-label>
      <mat-checkbox #nitrogen formControlName="nitrogen">
      </mat-checkbox>
    </mat-form-field>

    <div style="text-align: center; width: auto;">
   <div style="margin:5px; display: inline-block;"><button mat-raised-button class="btn" color="primary"
          (click)="create(nitrogen)">Create</button>
      </div>
  </form>
</div>

Answer 1

If you done the form setup properly, there is no need for getting the HTML values, directly access, this.productValidation.value.

contract ts:

export class Create_Product {
    nitrogen:Boolean;
}

ts:

  ngOnInit(): void {
        this.productValidation = this.formBuilder.group({
          nitrogen: [false],
          conductance: [0],
        });
  }

  @Output() createdProduct: EventEmitter<Create_Product> = new EventEmitter();

  create() {
      this.create_product.emit(this.productValidation.value);
  }

Html

<div class="container-fluid">
  <p style="text-align: center; font-weight: bold; font-size: 20px;color: rgb(13, 13, 190);">Add Product</p>
  <form class="example-form" [formGroup]="productValidation">

    <mat-form-field appearance="outline" class="product-create">
      <mat-label>Nitrogen</mat-label>
      <mat-checkbox #nitrogen formControlName="nitrogen">
      </mat-checkbox>
    </mat-form-field>

    <mat-form-field appearance="outline" class="product-create">
      <mat-label>Conductance</mat-label>
          <input matInput formControlName="conductance" type="number">
    </mat-form-field>

    <div style="text-align: center; width: auto;">
   <div style="margin:5px; display: inline-block;"><button mat-raised-button class="btn" color="primary"
          (click)="create()">Create</button>
      </div>
  </form>
</div>