1
\$\begingroup\$

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>
\$\endgroup\$

1 Answer 1

0
\$\begingroup\$

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

\$\endgroup\$
1
  • \$\begingroup\$ Ok, great change. But it would not fulfill the tow cases indicated in the question \$\endgroup\$
    – JRR
    Jul 31, 2021 at 20:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.