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>

• Vogel612: This feels like an Accordion to me. And @ViewChild is your friend :)
• Kokodoko: 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]=....

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

• JRR: Ok, great change. But it would not fulfill the tow cases indicated in the question
• Mast: @JRR What "tow" cases are you referring to?
• Sᴀᴍ Onᴇᴌᴀ: Perhaps the OP intended to ask about "two cases", given there is a numbered list in the OP with that number of items...