JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loader" *ngIf="showLoader">
  <i class="fa fa-spinner fa-spin"></i>
</div>
<!-- begin row -->
<div class="row mt-3 mb-3">
  <div class="col-lg-12 ">
    <h4 class="pb-2 border-bottom mb-2">Adhoc Report</h4>
  </div>
</div>
<mat-horizontal-stepper [linear]=true #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Criteria</ng-template>
      <div class="row">
        <mat-form-field class="col-4" appearance="fill">
          <mat-label>Report Title</mat-label>
          <input matInput placeholder="Report Title" formControlName="titleControl" name="titleList"  [(ngModel)]="titleList"  required>
          <mat-error *ngIf="firstFormGroup?.controls.titleControl?.errors?.required">
            Title is required
          </mat-error>
        </mat-form-field>
        <mat-form-field class="col-4" appearance="outline">
            <mat-label>Module</mat-label>
            <mat-select [(ngModel)]="moduleslist" name="moduleslist" formControlName="moduleControl" required>
              <mat-option *ngFor="let item of moduleList" [value]="item.id">
                {{item.module}}
              </mat-option>
            </mat-select>
            <mat-error *ngIf="firstFormGroup?.controls.moduleControl?.errors?.required">
              Module is required
            </mat-error>
          </mat-form-field>
      </div>
      <div style="text-align: end;">
        <button class="btn custom-stepper-btn" (click)="adhocReportFirststep()" type="submit" [disabled]="firstFormGroup.invalid" matStepperNext>Save & Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Select Fields</ng-template>
      <!-- <mat-form-field appearance="fill">
        <mat-label>Address</mat-label>
        <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
              ...

TypeScript

import { Component, OnInit, AfterViewInit, ViewChild, OnDestroy, Input } from '@angular/core';
import 'rxjs/add/operator/map';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';
import { DataTableDirective } from 'angular-datatables';
import * as moment from 'moment';
import { Subject } from 'rxjs/Subject';
import * as filter from '../../../filter.js';
// import * as $ from 'jquery';
// import $ = require('jquery');
import * as $ from 'jquery';
// declare var $: any;
import 'jqueryui';
import * as _ from 'lodash';
import { MatSnackBar, MatSnackBarVerticalPosition } from '@angular/material';
import { BillReportView } from '../../utils.model';
import { AdhocReportService } from '../adhoc-report.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { SendemailComponent } from '../../GeneralItems/sendemail/sendemail.component.js';
import { FILE_NAMES } from '../../GeneralItems/sendemail/fileNames.helper.js';

@Component({
  selector: 'app-edit-adhoc-report',
  templateUrl: './edit-adhoc-report.component.html',
  styleUrls: ['./edit-adhoc-report.component.scss']
})


export class EditAdhocReportComponent implements AfterViewInit, OnDestroy, OnInit {
  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;
  dtOptions: any = {};
  dtTrigger: Subject<any> = new Subject();

  // @Input() rowCount: number;
  // fileName = 'ProjectCostCount.xlsx';
  // hasPagination = false;


  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  isOptional = false;
  showLoader = false;
  message;
  verticalPosition: MatSnackBarVerticalPosition = 'top';

  moduleList: any;
  titleList: string;
  moduleslist: string;
  selectedListForcriteria: any;


  model: BillReportView = {} as BillReportView;
  selectedColumns: any[] = [];

  columnNameList: string[] = [];
  allColumnsListDetails = [];
  hasSelectionChanged = false;
  model1: any;
  reportID: any;
  reportId: any;
  allColumnsList = [];
 ...