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\$
2
  • \$\begingroup\$ This feels like an Accordion to me. And @ViewChild is your friend :) \$\endgroup\$ Commented Aug 29, 2022 at 13:27
  • 1
    \$\begingroup\$ But why do you use document.getElementById? Shouldn't you use angular component bindings? The same for adding css classes manually using classList.add ? Shouldn't an angular class be added using [class]=.... \$\endgroup\$ Commented Dec 20, 2023 at 4:01

1 Answer 1

Reset to default
3
\$\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\$
3
  • \$\begingroup\$ Ok, great change. But it would not fulfill the tow cases indicated in the question \$\endgroup\$ Commented Jul 31, 2021 at 20:21
  • 1
    \$\begingroup\$ @JRR What "tow" cases are you referring to? \$\endgroup\$ Commented Aug 27, 2022 at 20:12
  • \$\begingroup\$ Perhaps the OP intended to ask about "two cases", given there is a numbered list in the OP with that number of items... \$\endgroup\$ Commented Jan 23 at 21:09

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.