Simple solve. Create elems with flags. lets create array 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 elem <div class="row pl-15 pr-15"> <div id="pid-container" class="row" *ngIf="elem.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(elem.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(elem.pid,false)"> Back </button> </div> </div> </div> </div> <div id="rn-container" class="row" *ngIf="elem.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(elem.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(elem.rn, false)"> Back </button> </div> </div> </div> </div> <div class="row" id="doc-container" *ngIf="elem.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(elem.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(elem.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