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;
}
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>
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
