Return to Answer

public elems = {
pid: true,
doc: true,
rn: true
}
....

 toggle(elem, state) {
   this.submitOpt = state;
   elem = state;
 }

<div class="row pl-15 pr-15">
  <div class="row" *ngIf="elems.pid">
    <div class="col-3 pl-0">
      <mat-form-field>
        <input matInput id="police-id" [(ngModel)]="policyId">
      </mat-form-field>
    </div>
    <div class="col-1 align-self-center">
      <button mat-raised-button class="main" (click)="toggle(elems.pid,true)">
        Search
      </button>
    </div>
    <div *ngIf="policyId != '' && submitOpt">
      <app-policies-list [searchValue]="policyId"></app-policies-list>
        <div class="row">
          <div class="col text-align-right">
            <button mat-raised-button class="main" (click)="toggle(elems.pid,false)">
              Back
            </button>
          </div>
        </div>
    </div>
  </div>
<div class="row" *ngIf="elems.rn">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="request-number" [(ngModel)]="requestNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="toggle(elems.rn, true)"
      Search
    </button>
  </div>
  <div *ngIf="requestNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
      <div class="row">
        <div class="col text-align-right">
          <button mat-raised-button class="main" (click)="toggle(elems.rn, false)">
            Back 
          </button>
        </div>
      </div>
  </div>
</div>
<div class="row" *ngIf="elems.doc">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="documentation" [(ngModel)]="documentationNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="toggle(elems.doc,true)">
      Search
    </button>
  </div>
  <div *ngIf="documentationNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
    <div class="row">
      <div class="col text-align-right">
        <button mat-raised-button class="main" (click)="toggle(elems.doc,false)">
          Back
        </button>
      </div>
    </div>
  </div>
</div>

public elems = {
pid: true,
doc: true,
rn: true
}
....

 toggle(elem, state) {
   this.submitOpt = state;
   elem = state;
   for(const item in this.elems) {
     this.elems[item] = !state;
   }
 }

<div class="row pl-15 pr-15">
  <div class="row" *ngIf="elems.pid">
    <div class="col-3 pl-0">
      <mat-form-field>
        <input matInput id="police-id" [(ngModel)]="policyId" (input)="!policyId.trim().length ? toggle(elems.pid,false): ''">
      </mat-form-field>
    </div>
    <div class="col-1 align-self-center">
      <button mat-raised-button class="main" (click)="toggle(elems.pid,true)">
        Search
      </button>
    </div>
    <div *ngIf="policyId != '' && submitOpt">
      <app-policies-list [searchValue]="policyId"></app-policies-list>
        <div class="row">
          <div class="col text-align-right">
            <button mat-raised-button class="main" (click)="toggle(elems.pid,false)">
              Back
            </button>
          </div>
        </div>
    </div>
  </div>
<div class="row" *ngIf="elems.rn">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="request-number" [(ngModel)]="requestNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="toggle(elems.rn, true)"
      Search
    </button>
  </div>
  <div *ngIf="requestNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
      <div class="row">
        <div class="col text-align-right">
          <button mat-raised-button class="main" (click)="toggle(elems.rn, false)">
            Back 
          </button>
        </div>
      </div>
  </div>
</div>
<div class="row" *ngIf="elems.doc">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="documentation" [(ngModel)]="documentationNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="toggle(elems.doc,true)">
      Search
    </button>
  </div>
  <div *ngIf="documentationNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
    <div class="row">
      <div class="col text-align-right">
        <button mat-raised-button class="main" (click)="toggle(elems.doc,false)">
          Back
        </button>
      </div>
    </div>
  </div>
</div>

lets create array of elements with default settings. let be true by. default. And create 1 method for change state of elems.

in template will use *ngIf and click change state of flags elem

<div class="row pl-15 pr-15">
  <div id="pid-container" class="row" *ngIf="elem.pid">
    <div class="col-3 pl-0">
      <mat-form-field>
        <input matInput id="police-id" [(ngModel)]="policyId">
      </mat-form-field>
    </div>
    <div class="col-1 align-self-center">
      <button mat-raised-button class="main" (click)="toggle(elem.pid,true)">
        Search
      </button>
    </div>
    <div *ngIf="policyId != '' && submitOpt">
      <app-policies-list [searchValue]="policyId"></app-policies-list>
        <div class="row">
          <div class="col text-align-right">
            <button mat-raised-button class="main" (click)="toggle(elem.pid,false)">
              Back
            </button>
          </div>
        </div>
    </div>
  </div>
<div id="rn-container" class="row" *ngIf="elem.rn">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="request-number" [(ngModel)]="requestNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="toggle(elem.rn, true)"
      Search
    </button>
  </div>
  <div *ngIf="requestNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
      <div class="row">
        <div class="col text-align-right">
          <button mat-raised-button class="main" (click)="toggle(elem.rn, false)">
            Back 
          </button>
        </div>
      </div>
  </div>
</div>
<div class="row" id="doc-container" *ngIf="elem.doc">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="documentation" [(ngModel)]="documentationNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="toggle(elem.doc,true)">
      Search
    </button>
  </div>
  <div *ngIf="documentationNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
    <div class="row">
      <div class="col text-align-right">
        <button mat-raised-button class="main" (click)="toggle(elem.doc,false)">
          Back
        </button>
      </div>
    </div>
  </div>
</div>

lets create object of elements with default settings. let be true by. default. And create 1 method for change state of elems.

in template will use *ngIf and click change state of flags elems

<div class="row pl-15 pr-15">
  <div class="row" *ngIf="elems.pid">
    <div class="col-3 pl-0">
      <mat-form-field>
        <input matInput id="police-id" [(ngModel)]="policyId">
      </mat-form-field>
    </div>
    <div class="col-1 align-self-center">
      <button mat-raised-button class="main" (click)="toggle(elems.pid,true)">
        Search
      </button>
    </div>
    <div *ngIf="policyId != '' && submitOpt">
      <app-policies-list [searchValue]="policyId"></app-policies-list>
        <div class="row">
          <div class="col text-align-right">
            <button mat-raised-button class="main" (click)="toggle(elems.pid,false)">
              Back
            </button>
          </div>
        </div>
    </div>
  </div>
<div class="row" *ngIf="elems.rn">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="request-number" [(ngModel)]="requestNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="toggle(elems.rn, true)"
      Search
    </button>
  </div>
  <div *ngIf="requestNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
      <div class="row">
        <div class="col text-align-right">
          <button mat-raised-button class="main" (click)="toggle(elems.rn, false)">
            Back 
          </button>
        </div>
      </div>
  </div>
</div>
<div class="row" *ngIf="elems.doc">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="documentation" [(ngModel)]="documentationNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="toggle(elems.doc,true)">
      Search
    </button>
  </div>
  <div *ngIf="documentationNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
    <div class="row">
      <div class="col text-align-right">
        <button mat-raised-button class="main" (click)="toggle(elems.doc,false)">
          Back
        </button>
      </div>
    </div>
  </div>
</div>

1 lets create array of elements with default settings. let be default true.

public elems = {
pid: true,
doc: true,
rn: true
}
....

<div class="row pl-15 pr-15">
  <div id="pid-container" class="row" *ngIf="elem.pid">
    <div class="col-3 pl-0">
      <mat-form-field>
        <input matInput id="police-id" [(ngModel)]="policyId">
      </mat-form-field>
    </div>
    <div class="col-1 align-self-center">
      <button mat-raised-button class="main" (click)="elem.pid =true">
        Search
      </button>
    </div>
    <div *ngIf="policyId != '' && submitOpt">
      <app-policies-list [searchValue]="policyId"></app-policies-list>
        <div class="row">
          <div class="col text-align-right">
            <button mat-raised-button class="main" (click)="elem.pid =false">
              Back
            </button>
          </div>
        </div>
    </div>
  </div>
<div id="rn-container" class="row" *ngIf="elem.rn">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="request-number" [(ngModel)]="requestNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="elem.rn = true"
      Search
    </button>
  </div>
  <div *ngIf="requestNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
      <div class="row">
        <div class="col text-align-right">
          <button mat-raised-button class="main" (click)="elem.rn = false">
            Back 
          </button>
        </div>
      </div>
  </div>
</div>
<div class="row" id="doc-container" *ngIf="elem.doc">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="documentation" [(ngModel)]="documentationNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="elem.doc = true">
      Search
    </button>
  </div>
  <div *ngIf="documentationNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
    <div class="row">
      <div class="col text-align-right">
        <button mat-raised-button class="main" (click)="elem.doc = false">
          Back
        </button>
      </div>
    </div>
  </div>
</div>

lets create array of elements with default settings. let be true by. default. And create 1 method for change state of elems.

public elems = {
pid: true,
doc: true,
rn: true
}
....

 toggle(elem, state) {
   this.submitOpt = state;
   elem = state;
 }

<div class="row pl-15 pr-15">
  <div id="pid-container" class="row" *ngIf="elem.pid">
    <div class="col-3 pl-0">
      <mat-form-field>
        <input matInput id="police-id" [(ngModel)]="policyId">
      </mat-form-field>
    </div>
    <div class="col-1 align-self-center">
      <button mat-raised-button class="main" (click)="toggle(elem.pid,true)">
        Search
      </button>
    </div>
    <div *ngIf="policyId != '' && submitOpt">
      <app-policies-list [searchValue]="policyId"></app-policies-list>
        <div class="row">
          <div class="col text-align-right">
            <button mat-raised-button class="main" (click)="toggle(elem.pid,false)">
              Back
            </button>
          </div>
        </div>
    </div>
  </div>
<div id="rn-container" class="row" *ngIf="elem.rn">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="request-number" [(ngModel)]="requestNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="toggle(elem.rn, true)"
      Search
    </button>
  </div>
  <div *ngIf="requestNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
      <div class="row">
        <div class="col text-align-right">
          <button mat-raised-button class="main" (click)="toggle(elem.rn, false)">
            Back 
          </button>
        </div>
      </div>
  </div>
</div>
<div class="row" id="doc-container" *ngIf="elem.doc">
  <div class="col-3 pl-0">
    <mat-form-field appearance="outline" class="formfield">
      <input matInput id="documentation" [(ngModel)]="documentationNumber">
    </mat-form-field>
  </div>
  <div class="col-1 align-self-center">
    <button mat-raised-button class="main" (click)="toggle(elem.doc,true)">
      Search
    </button>
  </div>
  <div *ngIf="documentationNumber != '' && submitOpt">
    <app-policies-list [searchValue]="policyId"></app-policies-list>
    <div class="row">
      <div class="col text-align-right">
        <button mat-raised-button class="main" (click)="toggle(elem.doc,false)">
          Back
        </button>
      </div>
    </div>
  </div>
</div>

You shouldn't use classes. General is use variables in Angular. In fact, we got rid of two big methods and moved the display logic to the template