dialog pop create product

<h2 mat-dialog-title>
  <span class="add-product-title" data-testid="P_TITLE_POPUP">{{data.message}}</span>
  <button class="button-false" mat-dialog-close mat-dialog-close="false" data-testid="BTN_CLOSE_MODAL">
    <span class="x" aria-hidden="true" data-testid="SPN_CLOSE">&times;</span>
  </button>
</h2>
<mat-dialog-content class="mat-typography" data-testid="MAT_DIALOG_CONTENT">
  <div data-testid="DESC_CONTENT" class="add-prd-card" >
    <div class="row" style="padding: 30px;" >
    <div class="col-md-4">
      <label class="wrapper-app">My Wrapper Aplication</label>
      <div class="list-wrapper" *ngFor="let item of listWrapperApp;let i =index">
        <label class="list-name" (click)="wrap(item.id)">
          {{item.name}} &nbsp;
          <img src="../../../assets/icon/arr-product.svg" width="11.18px" height="6.59px">
        </label>
      </div>
    </div>
    <div class="col-md-4">
      <label class="wrapper-app">API Product</label>
      <div class="list-wrapper">
        <label class="check-question" *ngFor="let listcheck of listCheckBoxWrapperApp">
          <p class="list-checked" data-testid="P_TERM_CHECKED">
            {{listcheck.name}}
          </p>

          <input type="checkbox" data-testid="INPT_CHECKBOX" [(ngModel)]="listcheck.selected"  ngDefaultControl (change)="agreementTnc(listcheck.selected)">
          <span class="checkmark" data-testid="SPN_CHECKMARK"></span>

        </label>
      </div>
    </div>
    </div>
  </div>
</mat-dialog-content>

<mat-dialog-actions  class="modal-footer" data-testid="MAT-DIALOG_ACTION">
  <button mat-button class="cta cta-gradient-blue {{disableButton?'disabled':''}}" (click)="onNoClick()" cdkFocusInitial data-testid="BTN_MODAL_TRUE"> {{data.btnClose}}
    </button>
</mat-dialog-actions>