Hidden html elements after search click

Question

I want to:

1. Hide areas of my template after search click.
2. Return its original state with the cleaning of the input related to each button.

I don't know if my code exploits all the resources of angular or js and looks clear/clean. To my mind it sounds repetitive.

No forms of any kind are being used.

My .ts component:

export class PolicySearchComponent {

  policyId: string = '';
  requestNumber: string = '';
  documentationNumber: string = '';
  submitOpt: boolean = false;

  onClick(clicked) {
    this.submitOpt = true;
    if (clicked == 'pid') {
      (<HTMLInputElement>document.getElementById('rn-container')).classList.add('hidden');
      (<HTMLInputElement>document.getElementById('doc-container')).classList.add('hidden');
    } else if (clicked == 'rn') {
      (<HTMLInputElement>document.getElementById('pid-container')).classList.add('hidden');
      (<HTMLInputElement>document.getElementById('doc-container')).classList.add('hidden');
    } else if (clicked == 'doc') {
      (<HTMLInputElement>document.getElementById('pid-container')).classList.add('hidden');
      (<HTMLInputElement>document.getElementById('rn-container')).classList.add('hidden');
    }
  }

  onClickBack(clicked) {
    this.submitOpt = false;
    if (clicked == 'pid') {
      this.policyId = '';
      (<HTMLInputElement>document.getElementById('rn-container')).classList.remove('hidden');
      (<HTMLInputElement>document.getElementById('doc-container')).classList.remove('hidden');
    } else if (clicked == 'rn') {
      this.requestNumber = '';
      (<HTMLInputElement>document.getElementById('pid-container')).classList.remove('hidden');
      (<HTMLInputElement>document.getElementById('doc-container')).classList.remove('hidden');
    } else if (clicked == 'doc') {
      this.documentationNumber = '';
      (<HTMLInputElement>document.getElementById('pid-container')).classList.remove('hidden');
      (<HTMLInputElement>document.getElementById('rn-container')).classList.remove('hidden');
    }
  }
}

My .html template:

<div class="row pl-15 pr-15">
  <div id="pid-container" class="row">
    <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)="onClickSearch('pid')">
        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)="onClickBack('pid')">
              Back
            </button>
          </div>
        </div>
    </div>
  </div>
<div id="rn-container" class="row">
  <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)="onClickSearch('rn')">
      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)="onClickBack('rn')">
            Back 
          </button>
        </div>
      </div>
  </div>
</div>
<div class="row" id="doc-container">
  <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)="onClickSearch('doc')">
      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)="onClickBack('doc')">
          Back
        </button>
      </div>
    </div>
  </div>
</div>

Answer 1

Simple solve. Create elems with flags.

lets create object 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;
   for(const item in this.elems) {
     this.elems[item] = !state;
   }
 }

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" (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>

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